Coding Tip: jQuery Animation Queuing

/ jQuery / by Paul Robinson / 2 Comments
This post was published back on February 25, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

Animating with javascript is something that most web developers have ran into at one point or another. jQuery makes animating very easy by giving us access to the famous animate function. Something that most people overlook is the power of animation/fx queues. A common problem is this:

If you quickly hover in and out of the div above you will notice a problem where the animation queues up & completes the entire queue. Most of the time you will want the animation to respond quickly to your hovers & jump straight into the next animation. You can do this by changing you code to this:

Here is the example with the code changed.

I hope this tip helps you with your adventures into animating with jQuery.


Author’s gravatar

This thing we can do in CSS also, then why JS ?
any reason ?


Author’s gravatar author

Again. Not sure I follow. This post was wrote/published in 2010 when CSS based animations were in no way usable in the mainstream due to the complete lack of Internet Explorer support..

Even now you would need to use JS fallbacks for IE as only IE 10 has full support for CSS animations (according to

Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more