使用Timer JQuery更改背景颜色CSS [英] Change Background Color CSS with Timer JQuery

问题描述

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

我希望这些事件是由时间触发的，而不是点击或悬停。我已经看到悬停和切换的帖子，但作为不太熟练的JQuery的人，我不喜欢在这里和那里复制和粘贴零件。

谢谢

解决方案

我不知道你是否意味着动画是在衰落到下一个，但heres一个简单的例子， 2秒。第一个示例不需要jQuery。

Live Demo < a>

  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 Demo

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.

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

这篇关于使用Timer JQuery更改背景颜色CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！