CODEWITHSUNDEEP
jqueryhoverjquery-animate
JimmyJammed
JimmyJammed

Reputation: 9698

JQuery Animate - How to stop hover-on function as soon as hovered-off (dont complete hover-on function)

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'});
    }       
);

Upvotes: 1

Views: 2134

Answers (2)

Guffa
Guffa

Reputation: 700820

You can use the stop method to stop an animation, but that won't work well with relative values. You need to change them to absolute values so that you don't stop them halfways and then animate back past the starting value.

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78580

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'});
    }       
);

Upvotes: 2

Related Questions