Create looping background animation in jquery

Question

I want:

when the page loads, the background turns red after 10 seconds. bgColor changes to green with the animation fading away ... after another 10 seconds it changes to orange .... then again to red, etc.

Can someone help

Answer 1

Use setinterval with a callback that changes the background:

$("document").ready(function() { var colours = [ "blue", "orange", "pink" ]; var counter = 0; function cycleBackground() { $("body").animate({ backgroundColor: colours[counter] }, 500 ); counter++; if(counter == colours.length) { counter = 0; } } setInterval(cycleBackground, 10000); }); 

You will need to use the jQuery UI animate function if you want to seamlessly switch between colors.