Question

I have a single div, where i need to change between 4 different colors on repeat. So every, say 5 second, it faded to the next color “in line”, and when all 4 colors have been shown, it starts over again.

How would i do this?

Answer 1

You can use an array of colors, the modulo operator, and the setTimeout method in conjunction with the color animations available as part of JQuery UI:

var colors = ["red", "orange", "yellow", "green", "blue"]
var i = 0;

$("#myDiv").css("background-color","red");

function changeColor()
{
    i++;
    i=i%5;
    $("#myDiv").animate({backgroundColor: colors[i]},1000);
    setTimeout(changeColor,2500);
}

changeColor();

Sample fiddle: http://jsfiddle.net/johnkoer/8GGFM/26/