$.stop() vs. $.finish() In jQuery Animations
The other day, I was reviewing some code when I came across a relatively new jQuery function - $.finish(). This function was added in jQuery 1.9 and works similarly to the old $.stop() method with one very important difference: when you call $.finish(), jQuery applies the same CSS to the given set of elements that would have been applied if all of the animations had been allowed to finish naturally.
When you call $.stop() with the two optional arguments (true, true), jQuery will:
- Clear the animations queue for the element.
- Jump to the end of the currently-executing animation.
The different between $.stop() and $.finish() lies in the second item above. When $.stop() is called, jQuery will only jump to the end of the currently-executing animation; any subsequent animations in the queue will be cleared and ignored. If you call $.finish(), on the other hand, jQuery will jump to the end of all of the queued animations - not just the currently executing animation.
If you only have one animation in the "fx" queue, the following two statements are functionally equivalent:
- $.stop( true, true )
Since this is probably how most people interact with the $.stop() method, the difference may be hard to understand at first. It really only becomes apparent when more than one animation is being applied to the current element. To see this in action, I have two boxes below, each of which has two animations: slide-out and slide-in. If you "halt" the demo during the first animation, the difference will become clear:
Anyway, that is just a quick post. I haven't written much about jQuery, directly, in a long time. So, coming across an unknown function was pretty exciting. #NerdLife
Want to use code from this post? Check out the license.
Nice feature! Thanks for sharing. :) Good for when you are making a 100% AJAX controlled site.
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.
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.