Using jQuery stop Method With and Without Defined Parameters

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.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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.

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

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

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

$(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:

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