Question

Possible Duplicate:
How to loop a css background image with Jquery every few seconds?

I’m wondering how to achieve a simple “animation” effect of colors changing every second and if there is a way to animate the animation it can be even better.

I have just tried something like:

$('.box').delay(1000).css("background","red");

And it doesn’t work at all (the delay function isn’t working).. anyways i need like two of them:

$('.box').delay(1000).css("background","red");
$('.box').delay(1000).css("background","green");

So that it becomes red -> wait a second and becomes green -> becomes red again..

Is it possible? thanks!

Answer 1

$(document).ready(function() {
    setInterval(function() {
        $('body').animate( { backgroundColor: 'red' }, 300)
            .animate( { backgroundColor: 'green' }, 300);
    }, 1000);
});

http://jsfiddle.net/theSifter/yR6jc/