The jQuery API method of .stop() will stop the any animation effect that is taking place. You can use this to create a button that stops the animation and you can also combine the .stop() method with other .animate() methods to stop one animation and do something else.

If more than one animation method is called on the same element, later animations are places in an effect queue. They will not start until the other animations are finished or a .stop() method is called on an earlier animation.


Arguments for the .stop() method

queue: the name of the queue in which to stop animations

clearQueue:  true or false to remove the queued animations

jumpToEnd: will stop the current animation go to the end of the animation immediately

.stop(true, true); this stops the current animation and will start the next animation in the queue

.stop(true, false); this stops the animation at its current location and will not start the animation in the queue

.stop(false, false); this will stop the current animation and take it to the final result of the last animation in the queue


Will will show you an example of each of the .stop() methods with the different arguments:

        marginLeft: "40%",
        marginTop: "30%"
    }, 3000);
        marginLeft: "90%",
        marginTop: "0%"
    }, 3000);

    $("#slideOver").stop(false, true);


    $("#slideOver").stop(false, false);

    $("#slideOver").stop(false, true);

$("#reset").click(function() {
        marginLeft: "0%",
        marginTop: "0%"
    }, 500);


Here is the HTML:

<div id="slideOver"></div>
<p id="moveit">MOVE</p>
<p id="stopTT">.stop(true,true)</p>
<p id="stopTF">.stop(true,false)</p>
<p id="stopFT">.stop(false,true)</p>
<p id="stopFF">.stop(false,false)</p>
<p id="reset">RESET</p>


Here is the styling:

body {background: url(../sitegraphics/jqz-demo.jpg); padding: 15px;font-family: arial, sans-serif;}
#slideOver {background: #ff2222; height: 50px; width: 50px; border-radius: 25px;box-shadow:inset -1px -2px 8px #550000;}
[id^=stop], #reset, #moveit {position: absolute; bottom: 0%;padding: 6px;color: #fff;cursor: pointer;width: 120px; text-align: center;}
#moveit {left: 150px;background: #555533;}
#stopTT {background: #553333;left: 300px}
#stopTF {background: #553333;left: 450px}
#stopFT {background: #553333;left: 600px}
#stopFF {background: #553333;left: 750px}
#reset {left: 900px;background: #333355;}

Here is the result: