Learning jQuery

Making Quick Work

jQuery's animate() method is a quick way to create custom animation on an element. To do that, we provide a set of CSS style properties and values that those properties will reach at the end of the animation. You can also set up a sequence of animations which executes one after the other. This is called chaining animation in jQuery. Chaining animation can cause lag when user movement is involved like on click or on mouse over.

Stop () in Action

To give you an idea, first, see this sample code. Try to quickly move the mouse on the list items to notice the lag. The problem here is that more and more animation is added to the queue, which results in lag. To fix this problem, we need to use the jQuery stop() method.

According to jQuery documentation, “When .stop() is called on an element, the currently running animation (if any) is immediately stopped.” In other words, it stops the currently running animation. This method accepts 3 parameters,

• queue - A string value indicates the queue name. This is not needed for simple examples and can be left alone.
• clearQueue - An optional boolean indicating whether to clear the current animation queue. The default value is false.
• jumpToEnd - An optional boolean indicating whether to complete the current animation immediately. The default value is false.

3 Ways to Play

To create smooth animation and solve issues related to the animation queue, the stop() method can be used in 3 ways:

• stop() - This version stops the currently running animation.
• stop(true, false) - This will clear the animation queue so they don’t pile up, but will not force jQuery to jump to the end of the queue.
• stop(true, true) - This will clear the animation queue and also force a jump to the end of the queue and execute the last initiated animation.

Theoretically, it would be difficult to understand the difference between stop(true, false) and stop(true, true). First, you can see the both of them in action here. Move your mouse quickly on the elements to notice the differences.

You may have noticed that both of them give smooth animation compared to our previous code when stop() is not used. With stop(true, false) when you move the mouse too quickly on elements the animations don’t finish. This is because the queue is cleared and we are saying don’t execute the last initiated animation. With stop(true, true), the animation will indeed finish, but it's also not as smooth as when you move the mouse quick the final state is not reached. In our example, the opacity animation doesn’t get applied when the mouse is moved quickly. Here, stop(true, true) gives us smooth animation, but it still doesn’t give the desired result. How do we fix it?

jQuery offers another method called finish() which is similar to stop(true, true) with one main difference. The finish() method causes the CSS property of all queued animations to jump to their end values, as well. Consider our previous example: when the mouse is moved quickly, the last animation of opacity also gets applied. You can check the finish() method in action here.

Conclusion

Chaining sequences of animation can result in some lag in certain cases of user involvement. We saw how different versions of jQuery's stop() method can help to fix that lag, but not quite to the desirable result. To fix the issues with stop(true, true), the jQuery finish() method comes to rescue! The finish() method ensures the last animation is always executed. For complicated animations, finish() will come handy.