Question

I’m trying to have the following:

There is a fixed positioned div on the bottom of my page. When the mouse enters and exits the div animates its height to resp. 100px and 50px. The default height is 50px.

I’ve found that Jquery does this correctly with only one big no-no. When the mouse exits while animating and then reenters again it either:

a) stacks the animations leading to a lot (say 100) animations being done, while only one was necessary.

b) resets current animations, which leads to unexpected behavior like the div disappearing, changing to a fixed height which locks down or glitching up and down between 100 and 50 pixels.

Any ideas on this?

Answer 1

When you handle your mouseover and mouseout events, you should use the stop() function to clear the animation queue. It will let you jump to the end of the animation (before you start another one) if needed. You can also clear the whole queue of animations.

From the jQuery API documentation :

The usefulness of the .stop() method is evident when we need to animate an element on mouseenter and mouseleave:

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>

We can create a nice fade effect without the common problem of multiple
queued animations by adding
.stop(true, true) to the chain:

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});