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.
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
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

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

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 25/01/2021
3176 People Used
Only 97 Left
Rating
5.0