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.