使用Timer JQuery更改背景颜色CSS

本文介绍了使用Timer JQuery更改背景颜色CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我希望有人可以显示我高效的JQuery在一个div类中的4种背景颜色之间进行动画处理。 我希望这些事件是由时间触发的，而不是点击或悬停。我已经看到悬停和切换的帖子，但作为不太熟练的JQuery的人，我不喜欢在这里和那里复制和粘贴零件。 谢谢解决方案我不知道你是否意味着动画是在衰落到下一个，但heres一个简单的例子， 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。 演示2 function changeColor（element，curNumber） { curNumber ++; if（curNumber> 4）{ curNumber = 1; } element.addClass（'color'+ curNumber，1000）; //以前的类被删除。 element.attr（'class'，'color'+ curNumber）; setTimeout（function（）{changeColor（element，curNumber）}，2000）; } changeColor（$（'＃testElement'），0）; I was hoping someone could show me efficient JQuery to animate between 4 background colors in a div class.I would like these events to be triggered by time, not click or hover. I've seen posts on hover and toggle, but as someone not very proficient in JQuery, I didn't feel comfortable copying and pasting parts here and there.Thank you 解决方案 I dont know if you mean animated as in fading to the next, but heres a simple quick example of changing the color every 2 seconds. First example does not require jQuery.Live Demofunction changeColor(curNumber){ curNumber++; if(curNumber > 4){ curNumber = 1; } document.body.setAttribute('class', 'color' + curNumber); setTimeout(function(){changeColor(curNumber)}, 2000);}changeColor(0);Update animating colorSecond example requires Jquery UI if you wish to fade between classes or background colors.Demo 2function 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); 这篇关于使用Timer JQuery更改背景颜色CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！