使用计时器JQuery更改CSS背景颜色

Question

我希望有人能向我展示在 div 类中动画地在四个背景颜色之间切换的高效 jQuery 方法。

我希望这些事件是由时间触发，而不是点击或悬停。我看过关于悬停和切换的帖子，但作为一个不太熟练的 jQuery 用户，我不感到舒服将部分内容复制粘贴到这里和那里。

谢谢。

- RCNeil

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);

- Loktar

---

嘿，我在搜索时偶然发现了这篇文章。我需要使用JQuery使其动画化，以便每种颜色都可以淡入淡出。 - RCNeil

@RCNeil 看看我的更新，你需要包含 jQuery UI 来添加动画效果，比如添加类或者动态改变背景颜色。 - Loktar

是的，这将非常有效！有没有一种方法可以重复执行此函数？ - RCNeil

上面的那个函数一旦启动，就会无限重复执行，超时时间不断设置为2秒，因此它永远不会停止。或者你可以使用setInterval(function(){},time)，它会无限重复执行而无需重置超时时间。 - Loktar

啊，太好了。没错，在演示中它并没有起作用。但是我把它放到了一个真实的网站中，现在它运行得很好！非常感谢你。 - RCNeil

唯一的缺点是类别4和1之间没有动画效果（从绿色到黑色）。 - RCNeil

Answer 2

更新

我相信有更好的方法来完成这个任务，但是为了向您展示一种简单的方法...

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

---

你想要使用 window.setInterval() 函数...

window.setInterval(rotateBG, 1000); // 1000 = 1 second

function rotateBG() {
    // logic to rotate background
}

希望这能有所帮助。

- Hristo

---

谢谢您的提示！我应该放什么“逻辑来旋转背景？” - RCNeil