Code has been added to clipboard!

Using jQuery stop Method With and Without Defined Parameters

Reading time 2 min
Published Jul 3, 2019
Updated Sep 27, 2019

jQuery stop: Main Tips

  • The jQuery .stop() method stops the animation, currently running on the selected element.
  • Depending on the parameters defined, .stop() may work similarly to the .finish() function.
Theory is great, but we recommend digging deeper!

Usage of .stop(): An Example

The .stop() method stops the animation, currently affecting the selected element. In the example below, you have two buttons: one to start the animation, and the other to stop it:

The .stop() method without any parameters stops the animation. After one or both of the available parameters are included, the jQuery .stop() method gains more functionality. It can clear the queue assigned to an object that has other animations to finish. Also, it can immediately jump to the end of the animation.

jQuery .stop() Syntax Parameters Explained

The syntax of jQuery .stop() is as follows:

$(selector).stop(clearQueue,jumpToEnd)

Both parameters are optional and have boolean values which are false by default.

Parameter Definition
clearQueue Specifies whether all animations on the selected element should stop.
jumpToEnd Specifies whether to jump to the end of the animation after stopping it.

See the example of .stop() used for a .slideDown() animation without any parameters defined:

Example
$(document).ready(() => {
    $("#flip").click(() => {
        $("#box").slideDown(2500);
    });
    $("#stop").click(() => {
        $("#box").stop();
    });
});

Analyze the difference after the first parameter is set to true:

Example
$(document).ready(() => {
    $("#start").click(() => {
        $("div").animate({height: 150}, 1500);
        $("div").animate({width: 150}, 1500);
        $("div").animate({height: 50}, 1500);
        $("div").animate({width: 50}, 1500);
    });
    $("#stop").click(() => {
        $("div").stop(true);
    });
});

Both parameters are set as true in the next example. jQuery .stop() will work similarly as the .finish() function:

Example
$(document).ready(() => {
    $("#start").click(() => {
        $("div").animate({height: 300}, 3000);
        $("div").animate({width: 300}, 3000);
    });
    $("#complete").click(() => {
        $("div").stop(true, true);
    });
});