Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the NYC Tech Talk Meetup (Aug. 2010) with:

$.stop() vs. $.finish() In jQuery Animations

By Ben Nadel on

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:

  1. Clear the animations queue for the element.
  2. 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




Reader Comments

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.