demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Clean Up JQuery Animation By Clearing The Queue

javascript / animation

Estimated reading time: 1 minute, 21 seconds

If you’ve done any animation work with JQuery, particularly repeated animation cycles, you may find that your JavaScript-manipulated DOM exhibits odd behaviors after awhile, leaving elements cloned on the page, or in a half-animated state. This is particularly annoying because the effect is often subtle, appearing only after several cycles through the animation.

This phenomenon is known as “JQuery animation queue buildup”. Very simply, JQuery queues the animation tasks it must perform. If too many initiations of those animations take place – a mouseover effect being triggered too many times, or an animation cycle running for an extended period – JQuery’s animation queue becomes disorderly and confused.

This is something that is absent in CSS, but can plague JQuery. Aside from switching to CSS3 for your animation, there are two other solutions, depending on your needs:

  1. Like most everything else in JQuery, where there’s a problem, there’s a plugin. hoverFlow forces the JQuery queue to process only one animation cycle at a time, which may be particularly useful for user-initiated JQuery animation events that are quick-firing, such as mouseover hover effects.

  2. For all other cases, the solution is simple: stop() any animation before starting it. This clears the animation queue, preventing any buildup. For example in the “Simple JQuery News Ticker” article I wrote, you could simply add this to the event chain:

$('ul#to-do-list li:first').stop().fadeOut('slow', function()

It is still possible for the JQuery animation queue to get confused under some circumstances and in some browsers (for example, leaving the tab that contains your page active but hidden for an extended period of time in Firefox), but on the whole the solutions described work well.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.