jquery - jquery使用递归函数更改背景颜色

Question

我正在尝试在两种颜色之间制作 css 背景闪烁。最好的解决方案似乎是使用在类似问题上显示的递归函数：

(function pulse(){
        $('#my_div').delay(100).css("background-color","blue").delay(100).css("background-color","red").delay(100).fadeIn('slow',pulse);
})();​

http://jsfiddle.net/bSWMC/223/

我似乎无法获得背景切换颜色。这里可能有一个非常明显的答案，我是 jQuery 新手！

非常感谢您的帮助，杰里米

Answer 1

我只会为每种颜色创建两个 css 类，然后使用 jquery 函数 toggleClass 并给两个 css 类命名，即

$(div).toggleClass('class1 class2')

您可能还需要使用 setInterval 来设置运行 toggleClass 的时间。像这样的东西（http://jsfiddle.net/Eyq5x/31/）

<div id="me" class='yellow'></div>

div
{
    height:50px;
    width:50px;
}
.yellow
{
    background-color:yellow;

}

.red
{
    background-color:red;
}
​
$(document).ready(function(){
    setInterval(
        function(){
            $('#me').toggleClass('yellow red');
        },1000);
});​

Answer 2

seTimeout上面指出的另一种使用 Like @DhirajBodicherla 的潜在方法.delay不适用于.css. 由于 jQuery 返回rgb颜色.toggleClass可能是更好的方法。

function pulse(){
    var div = $('#my_div');
    if(div.css("background-color")=="rgb(255, 0, 0)"){
        div.css("background-color","blue");
    }else{
         div.css("background-color","red");
    }
      setTimeout(pulse,100);
}

pulse();

​现场 演示

Answer 3

我是这样做的-> http://jsfiddle.net/joplomacedo/bSWMC/229/

我将粘贴下面的代码：

js/jquery：

(function pulse() {
   $('#my_div').css('background-color', 'red');

   setTimeout(function() {
       $('#my_div').css('background-color', 'green');
   }, 2000);

   setTimeout(function() {
       $('#my_div').css('background-color', 'blue');
   }, 4000);

   setTimeout(pulse, 6000);
})();

CSS：

#my_div {
    height:60px;
    width:60px;
    background-color:red;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}​