在jquery中bg颜色之间淡出？

Question

我有一个div，我需要在重复时改变4种不同的颜色。所以每一个，比如说5秒，它就会“淡化”到下一个颜色，当所有4种颜色都显示出来时，它会重新开始。

我该怎么做？

Answer 1

您可以将颜色数组，模运算符和setTimeout方法与作为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();

示例小提琴：http://jsfiddle.net/johnkoer/8GGFM/26/