Last Updated: February 25, 2016
· bitandbang

Simple jQuery Animations Protip: use .stop(true, true); on all animations.

One of my biggest pet peeves is when developers use jQuery animations, but forget to use (or are entirely unaware of) .stop(true, true); in their chain. This simple method can prevent a lot of frustration on your users' end.

Here is a direct blurb from the jQuery docs about it: Stop the currently running animation on matched elements. What does this mean? Here's a breakdown of it.

  • The first true variable in .stop(true, true); is called clearQueue. This true clears all queued animations, so they don't pile up and continue animating even after your user is done interacting with the element.
  • The second true variable in .stop(true, true); is a bool that tells jQuery whether or not to jump to the end of the queue and just do the last animation that your user initiated.

You can see how these synergize by cutting all the piled up animations and only showing the final animation that your user triggered. I've found this to be a huge UI improvement both in how it visually looks and how you are professionally perceived by the user.


3 Responses
Add your response

I was never aware of this easy solution! Great tip! Thanks for sharing!
<br />Here's a great example of the .stop function implementation:

over 1 year ago ·

I never understood why isn't it the default behavior in jQuery! So frustrating!

over 1 year ago ·

It is becoming more common to steer away from jQuery animations altogether and go with progressive enhancement of CSS3 transitions.

The beauty behind this thought is that a website is not required to look the same in all browsers.

Then, there are the added benefits of:

  • No jQuery flickers (sometimes heights will flicker when completing an animation)
  • No excess worries (e.g. "Does it work right in IE6?")
over 1 year ago ·