使用Timer JQuery更改背景颜色CSS

我希望有人可以向我展示高效的JQuery，以便在div类中的4种背景颜色之间制作动画。

我希望这些事件能够被时间触发，而不是点击或hover。 我已经看过hover和切换的post，但作为一个不太精通JQuery的人，我觉得在这里和那里复制和粘贴部件感觉不舒服。

谢谢

Answer 1

我不知道你是否意味着动画就像褪色到下一个，但这是一个简单的快速例子，每2秒更改一次颜色。 第一个例子不需要jQuery。

现场演示

function changeColor(curNumber){ curNumber++; if(curNumber > 4){ curNumber = 1; } document.body.setAttribute('class', 'color' + curNumber); setTimeout(function(){changeColor(curNumber)}, 2000); } changeColor(0); 

更新动画颜色

如果您希望在类或背景颜色之间淡入淡出，则第二个示例需要Jquery UI。

演示2

 function changeColor(element, curNumber){ curNumber++; if(curNumber > 4){ curNumber = 1; } element.addClass('color' + curNumber, 1000); // So previous classes get removed. element.attr('class', 'color' + curNumber); setTimeout(function(){changeColor(element, curNumber)}, 2000); } changeColor($('#testElement'), 0); 

Answer 2

UPDATE

我确信有更好的方法可以做到这一点，但只是为了向您展示一种简单的方法来实现这一目标……

http://jsfiddle.net/UnsungHero97/QLPbW/5/

---

你想使用window.setInterval（）函数…

 window.setInterval(rotateBG, 1000); // 1000 = 1 second function rotateBG() { // logic to rotate background } 

我希望这有帮助。