Question

I have a button that will fade a div upon hover.
If I hover in a button then hover out and repeat that procedure multiple times in quick succession then hover out, the div will go on animating when it should have stopped.
Please refer to the following snippet.

http://jsfiddle.net/arvinboggs/uenEQ/9/

Is there a way to correct this behavior?

Is there a way stop the animation on the final hover out?

Answer 1

Cut and paste from a previous answer of mine to a similar question:

I actually create a ‘state’ variable to ensure only 1 action can fire at any time.

What I do is

set state = 0; when I initialise the page
check if state == 0 when something is clicked
if it's 0, then I set it to 1 (meaning something's happening)
run the animation
once the animation is complete, I reset the state to 0

Effectively, you can only fire the animation event is state == 0 and then there’s no overlapping.

---

So to answer your question, when you bind() the hover, it needs to check whether it’s allowed to fire the animation or not based on the state setting.

var hoverState = 0;
$('.myLink').bind('mouseenter'), function(){
    myHoverCode();
});

function hoverCode(){
  if(hoverState == 0){
    hoverState = 1; // bind this hover state so we can't trigger it again
   // do my animation
  $('#someElement').animate({
},100, function(){
// animation complete
hoverState = 0; // reset the hover state
});