$.stop() vs. $.finish() in jQuery animations

jQuery stop and finish methods are used to end of all of the queued animations. jQuery stop() method stops the currently running animation on the matched elements but jQuery finish() stops the currently running animation, removes all the queued animations and complete all the animations for the matched elements.

Let’s see what jQuery stop and finish method actually does.

When you call $.stop() with the two optional arguments i.e. (true, true), then jQuery:

• Clear the animations queue for that element
• Jumps to end of the currently executing animation

So, actual different between $.stop() and $.finish() lies in the second item above.

Read Also: Difference between .closest() and .parents()

When $.stop() method is called, jQuery will only jump to the end of the currently executing animation and any subsequent animations in the queue will be cleared and ignored.

And if you call $.finish(), then jQuery will jump to the end of all of the queued animations and complete all the animations – not just the currently executing animation.

In jQuery 1.7, to stop a toggled animation prematurely with .stop() triggers jQuery’s internal effects tracking.

But, if you have only one animation in a “fx” queue then the following two statements are functionally equivalent:

• $.stop( true, true );
• $.finish();

Read the documentation of $.stop() and $.finish() for more details.