To answer your question: in your code the colours DO change, just way to fast for an eye to see. The loop is run through all 1000 iterations VERY FAST, where your timeouts are executed on every iteration (also VERY FAST) which in turn makes them resolve seemingly all at the same time (too fast for an eye to see). Most importantly, your timers if triggered thsi way are ticking in parallel due to their asynchronous nature, where what you are looking for is for the timers to start in sequence, one after another. Hope this makes sense
Try using setInterval instead of timeout
var rainBowColors = new Array();
rainBowColors.push("#FF0000"); //Red: #FF0000
rainBowColors.push("#FF7F00"); //Orange: #FF7F00
rainBowColors.push("#FFFF00"); //Yellow: #FFFF00
rainBowColors.push("#00FF00"); //Green: #00FF00
rainBowColors.push("#0000FF"); //Blue: #0000FF
rainBowColors.push("#4B0082"); //Indigo: #4B0082
rainBowColors.push("#8F00FF"); //Violet: #8F00FF
var rainbowCounter = 0;
var interval = setInterval(function(){
jQuery(".text").css("color", rainBowColors[rainbowCounter]);
rainbowCounter++;
//Reset counter
if (rainbowCounter == rainBowColors.length)
{
rainbowCounter = 0;
}
},100);
P.S. This array declaration is identical to yours, yet a bit more concise. You may wanna use it instead:
var rainBowColors = [
"#FF0000", //Red
"#FF7F00", //Orange
"#FFFF00" //Yellow
// ... add other colors
];