使用 Timer JQuery 更改背景颜色 CSS

Posted 2023-03-06

【中文标题】使用 Timer JQuery 更改背景颜色 CSS

【英文标题】：Change Background Color CSS with Timer JQuery

【发布时间】：2011-10-22 19:21:26

【问题描述】：

我希望有人可以向我展示高效的 JQuery 以在 div 类中的 4 种背景颜色之间进行动画处理。

我希望这些事件按时间触发，而不是点击或悬停。我看过关于悬停和切换的帖子，但作为一个不太精通 JQuery 的人，我不习惯在这里和那里复制和粘贴部分。

谢谢

【参考方案1】：

我不知道你的意思是动画淡入下一个，但这里有一个简单的快速示例，每 2 秒更改一次颜色。第一个示例不需要 jQuery。

Live Demo

function changeColor(curNumber)
    curNumber++;

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


changeColor(0);

更新动画颜色

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

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

【讨论】：

嘿，我实际上是在搜索时看到这篇文章的。我需要它用 JQuery 制作动画，以便它淡入淡出每种颜色。

@RCNeil 查看我的更新，您需要取消 jquery UI 以添加动画以添加类或动画背景颜色。

yessssssss 这会很好用！有没有办法一遍又一遍地重复这个功能？

上述函数一旦启动将永远重复，超时只是保持设置为 2 秒，因此它永远不会停止，或者您也可以使用 setInterval(function(),time) 这将永远重复，无需重置超时。

不错。是的，它只是在演示中没有这样做。我把它放在一个真实的网站上，效果很好！非常感谢。

【参考方案2】：

更新

我确信有更好的方法可以做到这一点，但只是向您展示一个简单的方法来完成这个......

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

---

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

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

function rotateBG() 
    // logic to rotate background

我希望这会有所帮助。

【讨论】：

感谢您的提示！我会将什么作为“旋转背景的逻辑”放置？