Mass animations with jQuery

In a recent web app project that uses jQuery on the client we needed to animate many many HTML elements (about 1500) at once and synchronously. As the normal animate method of jQuery does the animation on each element setting its element style one gets pretty fast into performance troubles when doing such mass animations. It also never looked really synchronous as the first element in the jQuery object started its animation earlier than the last one.

To solve that problem we thought about animating styles of a class that is common to all that elements. We then also found jQuery RuleAnimation that depends on jQuery Rule for style rule mainpulations. Unfortunately both seem to be unmaintained and incompatible with newer (>= 1.4.3) jQuery versions. So we decided to create a new jQuery extension that focuses exactly on the animation problem.

As result we came up with jQuery Mass Animate.

$.massanimate("div.custom-class")
.css({width: 10, opacity: 1})
.animate({width:200, opacity: 0}, 1000)
.remove();

In the example a new style rule is created and initial styles are set (note that you can also use Mass Animate to just set custom style rules at runtime without animating at all). Then an animation is performed on exactly that style rule. Afterwards the style rule is removed again (after the animation was finished). So pretty straightforward and using the same syntax as the normal jQuery methods for working on elements. Mass Animate even uses the original methods with some hacks to make them work with style rules.

Here is a little Demo. The code (MIT, GPL dual licensed) and documentation can be found at the jQuery Mass Animate GitHub repo. Mass Animate is fully Unit tested and tested on nearly all current browsers (FF3/4, Chrome, Opera 11, IE7/8/9).