jQuery: How to stop an animation and prevent multiple queued animations

There is a magic jQuery method for it, called stop(). When called, it immediately stops any active animation on matched elements.

For example the following

    $("...").animate({left: '+=100px'}, 2000).stop();//nothing happens, animation is queued

will queue the animation but it will not move. A second call for an animation on this object will move it first by 100px and then by whatever animation you choose:

    //Example 1    
    $("...").animate({left: '+=100px'}, 2000).stop();     //nothing happens, animation is queued
    $("...").delay(2000).animate({top: '+=200px'}, 2000); //moves to the right by 100 and then down by 200

This is the default behavior of “.stop()” but you can alter it with the help of two boolean arguments, clearQueue and jumpToEnd. Default values of these are false, meaning that when stop is called (either like “.stop()” or like “.stop(false, false)”), the object immediately stops any movement and the animation is queued, waiting for the next call:

    //Example 2, (clearQueue:true, jumpToEnd:true)
    $("...").animate({top: '+=50px'}, 2000).stop();             //nothing happens, animation is queued
    $("...").animate({left: '+=100px'}, 2000).stop(true, true); //goes left +100 without an animation, animation queue is cleared
    $("...").delay(2000).animate({top: '+=200px'}, 2000);       //moves down by 200
    
    //Example 3, (clearQueue:false, jumpToEnd:true)
    $("...").animate({top: '+=50px'}, 2000).stop();              //nothing happens, animation is queued
    $("...").animate({left: '+=100px'}, 2000).stop(false, true); //goes left +100 without an animation, animation queue is NOT cleared
    $("...").delay(2000).animate({bottom: '+=200px'}, 2000);     //moves down by 50 and down again by 200
    
    //Example 4, (clearQueue:true, jumpToEnd:false)
    $("...").animate({top: '+=50px'}, 2000).stop();              //nothing happens, animation is queued
    $("...").animate({left: '+=100px'}, 2000).stop(true, false); //nothing happens, animation queue is cleared
    $("...").delay(2000).animate({bottom: '+=200px'}, 2000);     //moves down by 200

The most common use of stop method would be an animation for mouseover/mouseout events, for example for a drop-down menu or focusing on a field. User usually moves the mouse many times over and out your element, causing animations to queue and play over and over. Best practice to prevent this and give a smoother result to the end user would be something like this:

//Previous animation STOPS immediately
// and the new one (DoWhatEverEffect or UndoWhatEverEffect) continues from that point
$("...").hover(function() {
    $(this).stop(true, false).DoWhatEverEffect();
}, function() {
    $(this).stop(true, false).UndoWhatEverEffect();
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s