Seize the opportunity to gain new skills and reshape your career!

Choose a free learning path and get valuable insights from first-rate courses

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.