Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

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

Reading time 1 min
Published Jun 13, 2019
Updated Sep 30, 2019

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.