Animating background color to transition through colors on html element causes 100% cpu load

Question

Hi,

I'm trying to create an effect where small dots on the html background gradually change color in an infinite loop. I have a 960px centred design so the background area can get quite large.

My solution was to set the background-color to a default color then tile a square grey image with a transparent corner knocked out over the top - so it shows the background through it.

I've then used the jQuery UI libabry to animate the changing background color:

$("#root")
.animate({fontSize:"1em"},pause)
.animate( { backgroundColor: 'blue' }, transition) .animate({fontSize:"1em"},pause)
.animate( { backgroundColor: 'darkred' },transition);

This works but theres a big problem!

During the period where the backgroundColor is transitioning my CPU (firefox) usage goes to 100%.

so,

Is this the solution you would use?

If it is any ideas how to sort out the CPU usage?

Also how do you loop the animations?

Appreciate any help, John

Answer 1

Instead of using jquery, maybe you should consider replacing your dot background with animated GIFs or PNGs?

Answer 2

what is standing in de element with id "root" only the dots?

Answer 3

The 100% CPU utilization seems to be a common thread among long-running jquery animations, from what I've read on SO.

If your animations happen slowly, instead of doing a single .animate() call to go from 'blue' to 'darkred', try using a timer to make the animation happen in tiny increments (every 100ms or so).

Or use an animated GIF as suggested above. It would save you lots of hassle.

Answer 4

I found this article which has a great solution:

link text

Uses setInterval() that calls a function repeatedly.