Code has been added to clipboard!

Using jQuery .finish() Method for Running and Queued Animations

Reading time 1 min
Published Jun 13, 2019
Updated Jan 21, 2020

jQuery finish: Main Tips

  • The jQuery .finish() method stops all currently running animations. It jumps straight to the end of animations for the matched elements.
  • This function also removes animation queues.

Stopping Animations

By using jQuery .finish(), you can stop all the currently running animations and finish them immediately. You can also clear animations that are queued.

In the example below, you see two buttons: one is used to start the animation on the element, and the second one makes jQuery stop animation:

Example
$("button").click(() => {
    $("#animatedItem").finish();
});

Here is the syntax you would use for jQuery .finish():

$("selector").finish(queue);

The argument queue defines the name of the queue to stop animations in. The default value for jQuery .finish() is fx which represents the standard effects queue.

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: 28/01/2021
3176 People Used
Only 97 Left
Rating
5.0