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?
I think the way jQuery animate() works is that it uses a timer that periodically fires and invokes a function that updates the DOM to reflect the state of the animation. Typically animations are relatively short and they may cover a fair amount of screen real estate, so I suspect (without confirming) that the timer expires, and is reset, at a fairly high rate to generate a smooth animation. Since your animation takes a long time, you might be able to modify the animate function so that the rate at which the animation proceeds can be set via an option. In your case you’d only need to update every 250ms or so since you’re covering about 3-4 pixels per second, roughly.