$.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.
View this demo in my JavaScript-Demos project on GitHub.
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 )
- $.finish()
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:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>
Stop() vs. Finish() In jQuery
</title>
<style type="text/css">
div.box {
background-color: #FAFAFA ;
border: 1px solid #CCCCCC ;
height: 50px ;
line-height: 50px ;
overflow: hidden ;
width: 0px ;
}
form {
margin-bottom: 16px ;
}
</style>
</head>
<body>
<h1>
Stop() vs. Finish() In jQuery
</h1>
<form action="#">
<input type="button" value="Reset" class="reset" />
<input type="button" value="Start" class="start" />
<input type="button" value="Halt" class="halt" />
</form>
<div class="box box1">
Stop()
</div>
<br />
<div class="box box2">
Finish()
</div>
<!-- Load scripts. -->
<script type="text/javascript" src="../../vendor/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
// Cache our DOM elements like good citizens.
var dom = {
reset: $( "input.reset" ),
start: $( "input.start" ),
halt: $( "input.halt" ),
box1: $( "div.box1" ),
box2: $( "div.box2" )
};
// Reset the demo by quitting all animations and manually
// setting the widths.
dom.reset.click(
function( event ) {
dom.box1.add( dom.box2 )
.stop( true, true )
.width( 0 )
;
}
);
// Start animations on both elements. The animations will
// include a slide-out followed by a slide-in of each element.
// Meaning, there are two different animations in the queue at
// the start of the experiment.
dom.start.click(
function( event ) {
dom.box1.add( dom.box2 )
.animate( { width: "400px" }, 3000 )
.animate( { width: "0px" }, 2000 )
;
}
);
// Stop both animations.
dom.halt.click(
function( event ) {
// True ( clear queue, jump to end ).
dom.box1.stop( true, true );
dom.box2.finish();
}
);
</script>
</body>
</html>
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.
Reader Comments
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.
http://www.namasteui.com/stop-vs-finish-in-jquery-animations/