JQuery animations and stop()

Jquery animations are tricky to implement without flaws. You’ll face a lot of trouble trying to achieve an smooth and coherent animation, specially when using multiple animations on user interaction. Usually the most standard solution when facing animation issues is to use stop() function. Generically, it will stop the current animation on progress, if any. You’ll use it when the user promptsĀ  another animation before having the current one finished yet:

<button class="moveright">Move right</button>
<button class="moveleft">Move left</button>
<div id="square" style="background-color:green; position:relative; 
                           width:50px; height:50px"></div>

$('.moveright').click(function () {
        right: "-=100px"

$('.moveleft').click(function () {
        right: "+=100px"

See the result

Usually, though, this approach is not enough. Imagine an scenario where you have a concatenation of animations in a given event, say a mouse click. When another click queries for another animation:

  1. Without stop(), it will wait until the current animation and those in the queue are finished and only then the new ones will proceed.
  2. With stop(), it will stop the current animation, AND continue with the other animations in the queue. And only then the new ones will proceed.

This behavior is usually not welcome, as when you have an animation as a reaction for an user event, the user expects this reaction to happen at the moment, and smoothly (and, of course, the user is not patient, you can’t ask him to wait for the current animation to finish šŸ™‚ ). Then is when reading stop() documentation comes into play:

It admits 2 arguments: clearQueue and jumpToEnd. Both default to false, therefore stop() means stop(false, false). When ClearQueue = true, it will not only stop the ongoing animation, but will discard all the other animations waiting their turn in theĀ queue. It’s important to recall that all animations such as fadein() fadeout(), animate()… when called when another animation is being performed, are added to the queue (by default named “fx”) waiting their turn in FIFO order. Therefore, when stop(true, false) is called, whichever queued animations will not be performed and the new one will be fired immediately. This is the most basic feature of this function when you need a quick reaction at any user action, as this ensures this reaction to be instant.

Queue functionality in JQuery is useful in multiple ways, but when working with event-animation it’s almost always a hassle you have to deal with. “clearQueue” is the argument that will help you with that. Generally it would be enough, but sometimes you’ll need to think over the second argument of stop(), jumpToEnd. Depending on the nature of the user interaction and the animation used, you’ll need to figure out whether or not to use it. If false, the animation will stop and the object animated will remain at whichever place it was when stopped. If true, it will jump instantaneously to it’s animation’s final position. This is important, because in our situation this will tell where the next animation is starting from. Generally though, stop(true, true) will not be the best answer, as it will most definitely kill any smoothness you were willing to achieve.

Check the case which drew me to write this post in this script file of my personal web http://www.arnauorriols.com