Fading colour of links on mouseover mouseout with jQuery

Question

Im trying to achieve a nice fade to color effect when you mouse over links in jQuery.

So far I have:

$('a').hover(
function () { 
    $(this).animate({ color: '#fff' }, 1000 );
},
function () { 
    $(this).animate({ color: '#000' }, 1000 );
});

Which actually does work fine. However, imagine if the links are navigation, being close to each other. If you tried hovering from one link, to the one next to it and back several times. The links go mental fading in and out, how would I stop an event being "queued" if there is a animation already happening?

Any advice appreciated!

Answer 1

You're looking for the stop function

$('a').hover(
    function () { 
        $(this).stop().animate({ color: '#fff' }, 1000 );
    },
    function () { 
        $(this).stop().animate({ color: '#000' }, 1000 );
    }
);