4

What I want is:

when the page loads - the background has color red after 10 seconds the bgColor changes to green with a fade in fade out animation... after another 10 seconds it changes to orange....then again to red and so on..

Could someone help

Joel
  • 19,175
  • 2
  • 63
  • 83
Pankaj Dubey
  • 43
  • 1
  • 3

1 Answers1

7

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 jQuery UI's animate function if you want to smoothly cycle between colors.

karim79
  • 339,989
  • 67
  • 413
  • 406
  • Add the fade animation and this is exactly right. ( `$("body").animate({ "background-color": colours[counter] });` if you include the jquery color animation plugin) – Joel Mar 02 '10 at 00:01
  • Thanks Joel, I initially missed the 'fadeIn' and 'fadeOut' bit. I think jQuery UI's animate can do colours. – karim79 Mar 02 '10 at 00:03