🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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.
DataCamp
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
Udacity
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
Udemy
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

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