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!