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

• 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

EXCLUSIVE: 75% OFF

Pros

• Easy to navigate
• No technical issues
• Seems to care about its users

Main Features

• Huge variety of courses
• 30-day refund policy
• Free certificates of completion

AS LOW AS 12.99$

Pros

• Great user experience
• Offers quality content
• Very transparent with their pricing

Main Features

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

75% DISCOUNT

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);
    });
});