使用Timer JQuery更改背景颜色CSS [英] Change Background Color CSS with Timer JQuery
问题描述
我希望有人可以显示我高效的JQuery在一个div类中的4种背景颜色之间进行动画处理。
我希望这些事件是由时间触发的,而不是点击或悬停。我已经看到悬停和切换的帖子,但作为不太熟练的JQuery的人,我不喜欢在这里和那里复制和粘贴零件。
谢谢
我不知道你是否意味着动画是在衰落到下一个,但heres一个简单的例子, 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。
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.
function changeColor(curNumber){
curNumber++;
if(curNumber > 4){
curNumber = 1;
}
document.body.setAttribute('class', 'color' + curNumber);
setTimeout(function(){changeColor(curNumber)}, 2000);
}
changeColor(0);
Update animating color
Second example requires Jquery UI if you wish to fade between classes or background colors.
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);
这篇关于使用Timer JQuery更改背景颜色CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!