Body Background Changer?

Question

Alright here it is.

Simply, I want to be able to have the background of the body via CSS fade out and change every so often and then loop.

Any ideas how I can achieve this with CSS and jQuery?

Thank you!

Answer 1

You can use the jquery animate method and when it completes call the method again with a new color:

var color = ["red","green","blue"];
var i = 0;

function changeColor()
{
 // Change to the next color over 2 seconds.  When it is done, call this method again.
 $("body").animate({"background-color":color[i]}, 2000, changeColor); 
 i++;  // Increment the counter so the next color in the array is shown
 i = i % 3;   // Make sure i is never greater than 2 by using the modulous.
}

changeColor();

See this fiddle: http://jsfiddle.net/johnkoer/vDCSw/5/

​