Clearing the jQuery animation queue

Ever see sites where a jQuery animation happens over and over when you rollover or click it multiple times. It’s almost as if the animations are stacking on top of one another in a queue and executing one by one, and guess what? That’s exactly what’s happening. Not to worry though, there is a simple and easy way to fix this.

Below we have four examples, two jQuery toggles and two jQuery hovers. The first toggle and the first hover do not employ the stop() function while the proceeding ones do. Try them out for yourself.

4 examples

No stop() function used

var height = $('#example1').height();
$('#example1').toggle(function() {
     $(this).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).animate({'height' : height}, 'slow');
});

$('#example3').hover(function() {
     $(this).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).animate({'height' : height}, 'slow');
});

The above examples first get the height of the example1 id, this height is then used for resetting all the examples to their original height after the first animation.

The snippet then sets the height the #example1 element to 100px when toggled/clicked and then back to the original height when toggled again. The same logic is applied to #example3 only with a hover instead. If you rapidly click the first and third examples above you will see the animations queue up and continue repeating until finished. It is more noticeable with rollovers, and this is probably not a desirable behavior in most situations.

Examples 2 and 4 use the jQuery stop function

$('#example2').toggle(function() {
     $(this).stop(true, true).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).stop(true, true).animate({'height' : height}, 'slow');
});
$('#example4').hover(function() {
     $(this).stop(true, false).animate({'height' : '100px'}, 'slow');
},
function() {
     $(this).stop(true, true).animate({'height' : height}, 'slow');
});

As you can see it’s pretty simple to fix, but you also have to be careful with the stop() function as sometimes you can get undesirable flicker effects.

Understanding the stop() function

The stop function takes two Boolean values, both of which default to false.

.stop( [ clearQueue ], [ jumpToEnd ] )

The first value clearQueue will stop the animation from stacking or queuing up each animation. The jumpToEnd value tells whether to finish or jump to the end of the animation sequence. You will often need to play around with these values to see what works best. As you can see in the hover example, the mouse over clears the queue but continues to animate, while the mouse out clears the queue and jumps to the end of the animation. If these values are all left to true in this example you can get some flickering effects.

Remember that the jQuery stop() function can be used on any animation function, which includes functions like slideUp() and SlideDown(). Happy coding.