I’m not going to lie:  I’m a javascript hack.  I dont know what I’m doing half the time, because I don’t have to use it all that often.  jQuery is seriously my saving grace when it comes to appearing to know what I’m doing with javascript.

That said, I’m currently working on a project that requires quite a bit of javascript work – specifically involving some animations – slideUp and slideDown stuff mostly.  I put it all together, and it worked beautifully in Firefox and Safari on my mac – smooth animations, perfect transitions.  As though I knew what I was doing.  I fire it up in IE7 just to be sure, and it’s a nightmare.  You can’t really call it “animation”.  Slow, choppy, and unpredictable – legitimately unusable.

A bit of googling around revealed that apparently no one else in the world has this problem, and I am an idiot.  Then I happened upon a gem at stackoverflow.com which mentioned, in passing, that Internet Explorer does an awful job of caching and displaying background images (specifically repeated background images) during animation – basically, he implied that for each frame of animation, I.E. loads, places, and renders each instance of a repeating background image, just one example of how a browser could have issues with animations. The specific elements I’m working with are 1000 px wide rows, and with each animation, about 10 of them have to move 300 pixels or so.  The kicker?  Each one is using a 1px wide repeating background.  1000 background images * 10 rows, and it becomes apparent why the animation was so bad.  I bit the bullet and tried a single 1000px wide background image, and the difference was night and day.

The moral of the story is this: the css techniques you use on elements that will be animated can have a serious affect on animation performance.  If you’re having problems, give some real thought to what the browser will have to do to animate the elements – calculating heights, margins, widths, background images, etc etc.  Experiment with different values, with an eye toward explicitly defining any value that the javascript might have to calculate (i.e. define heights instead of just letting the browser do it), and you can probably make a big difference in your javascript animation quality.