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:
- 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.
- 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.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
