jQuery animate() and browser performance

Question

I've got some elements that I'm moving across the page very slowly. Essentially, I'm decreasing the left margin of two images over a span of 40 seconds or so.

Visually, it's working beautifully. However, my processor jumps to about 50% usage during the animations. This isn't specific to any single browser either- it's the same way on Safari3 and Firefox3. If I have both browsers running the page, my CPU is screaming at about 95% usage.

I'm using jQuery 1.3. Both animations are happening concurrently. There's no Flash on the page. If I comment the code out (remove the animation) and refresh the page, my processor immediately returns to normal usage.

I'm hoping I don't have to resort to Flash, but even watching shows on Hulu.com doesn't spike my CPU like this.

Thoughts?

Answer 1

I just watched the performance of animation under Scriptaculous, and found similar CPU spikes: roughly 50% for IE, slightly better performance (16-30%) for Firefox -- both on a DuoCore PC. Since both JQuery and Scriptaculous work by changing the underlying CSS, I think it's safe to say that any Javascript implementation is going to be computationally expensive.

You may well be stuck going with Flash.