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的另一种可行方式，如上面指出.delay的@DhirajBodicherla不适用于.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();

的 Live Demo

Answer 3

我是这样做的 - ＆gt; 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;
}

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

3 个答案: