wlwudw
Last Updated: February 25, 2016
·
5.525K
· 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.

Enjoy!

Say Thanks
Respond

3 Responses
Add your response

1971

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

over 1 year ago ·
2468
D42a7264714dee5006b9c99d2567a320

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

over 1 year ago ·
6296
15927fc52919e9223adc7ed99e125d4d

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.

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

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 ·