Don't animate if already animating

Question

Going mad. I had this working and then stupidly overwrote my code without a backup, and now can't remember how I did it!

I have a drop down social yeti: http://projects.jonhudsonweb.com/work

However if you repeatedly run mouse over it it repeats the animation again and again. Here is my failed effort to stop this:

$('#social-yeti').not(':animated').hoverIntent(function(){
    $(this).delay(300).animate({top:"+=203"}, 1000)
    }, function(){
    $(this).delay(300).animate({top:"-=203"}, 1000)
    } 
);

I'm sure this is how I did it before though! Any help greatly appreciated!

Answer 1

Try placing the .stop() method before animating:

$('#social-yeti').hover(function() {
    $(this).stop(true, true).animate({ top:"0" }, 1000);
}, function() {
    $(this).stop(true, true).animate({ top:"-203" }, 1000);
});

This will basically clear the animation queue for the element before starting a new animation.

Edit-----

the problem before is that you were adding a value to the top current value at the middle of the animation (+=203). I changed to animate to specific 'top' values instead of adding/substracting values to avoid bizarre jumps. Try the code now.

The first .stop parameter indicates whether or not to clear the queue, the second one indicates it should jump to the end of the current animation. Feel free to change them if needed.

Answer 2

You need to set a boolean variable, lets call it animating, beginning with false.

When mouse hovers, before starting the animation, check if animating is false, if it is the animation starts, and you change its value to true.

Else, do nothing.

When the animation is done, (use the callback function) set animating value back to false.