Question

I have a menu navigation area where I use .animate to slide the text over when its hovered on, then slide it back when hovered off. I would like to be able to immediately stop the slide animation once the mouse is hovered off the tab. How can I do that?

$('a.menu').hover(
    function(){
        if(!$(this).hasClass('current'))
            $(this).animate({'padding-right': '+=10'});
    },
    function(){
        if(!$(this).hasClass('current'))
            $(this).animate({'padding-right': '-=10'});
    }       
);

Answer 1

Use the stop() method

$('a.menu').hover(
    function(){
        if(!$(this).hasClass('current'))
            $(this).stop().animate({'padding-right': '+=10'});
    },
    function(){
        if(!$(this).hasClass('current'))
            $(this).stop().animate({'padding-right': '-=10'});
    }       
);