0

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!

Aaron Brewer
  • 3,567
  • 18
  • 48
  • 78

1 Answers1

2

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/

​

John Koerner
  • 37,428
  • 8
  • 84
  • 134
  • That's awesome! But how would I do it with a Background Image? Thank you very much! – Aaron Brewer Sep 23 '12 at 21:25
  • You have to use a div and then animate the image on that by doing some cross fading. See this answer for more info: http://stackoverflow.com/q/4630947/573218 – John Koerner Sep 23 '12 at 21:35