延迟一个事件，如更改div的背景颜色

Question

我正在尝试使用<delay>来延迟事件，例如更改背景颜色。我希望事件能够遵循我想要的延迟时间，但结果表明它们并不是我想要的顺序。我期待第一个在1秒内变红。然后第二个在2秒内变红。然后第三个在0.8秒内变红。我不知道如何让它们变成不同的颜色。 非常感谢您的帮助。

$(document).ready(function(){ 
 
    var delayTime = [1000, 2000, 800]; 
 
    var bcolor = ['red','blue','green']; 
 
    var i = 0; 
 
    $('#play').click(function(){ 
 
     $('div').each(function(){ 
 
      $(this).delay(delayTime[i]).queue(function(next){ 
 
       $(this).css('background','red'); \t \t \t \t \t \t \t \t 
 
       next(); 
 
      }); 
 
      i++; 
 
     }); // end of each 
 
    }); 
 
}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
 
<div id="red" style="width:100px; height: 100px; background-color: white" ></div> 
 
<div id="blue" style="width:100px; height: 100px; background-color: white"></div> 
 
<div id="green" style="width:100px; height: 100px; background-color: white"></div> 
 
<button id="play">Play</button> 
 
<h1 id="test"></h1>

Answer 1

1：的代替i=0;可以使用index of div

第二：为delayTime您可以将以前的时间添加到新的一个，以获得正确的延迟时间。所以，如果你有[1000， 2000年，800]新的延迟时间将是1000，然后3000，然后3800等

您可以使用此代码

$(document).ready(function(){ 
 
    var delayTime = [1000, 2000, 800]; 
 
    var bcolor = ['red','blue','green']; 
 
    var timeDelay = 0; 
 
    $('#play').click(function(){ 
 
     $('div').each(function(i){ // i mean index of div starts from 0 
 
      timeDelay += delayTime[i]; // add a pervious delayTime (the trick here) 
 
      $(this).delay(timeDelay).queue(function(){ 
 
       $(this).css('background', bcolor[i]); //use bcolor[i] to get a color 
 
      }); 
 
     }); // end of each 
 
    }); 
 
}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
 
<div id="red" style="width:100px; height: 100px; background-color: white" ></div> 
 
<div id="blue" style="width:100px; height: 100px; background-color: white"></div> 
 
<div id="green" style="width:100px; height: 100px; background-color: white"></div> 
 
<button id="play">Play</button> 
 
<h1 id="test"></h1>

Answer 2

您还需要使用循环拿起颜色：

$(document).ready(function() { 
 
    var delayTime = [1000, 2000, 800]; 
 
    var bcolor = ['red', 'blue', 'green']; 
 
    var i = 0; 
 
    $('#play').click(function() { 
 
    $('div').each(function() { 
 
     var bg = bcolor[i]; // here update value color 
 
     $(this).delay(delayTime[i]).queue(function(next) { 
 

 
     $(this).css('background', bg); 
 
     next(); 
 
     }); 
 
     i++; 
 
    }); // end of each 
 
    }); 
 
}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="red" style="width:100px; height: 30px; background-color: white"></div> 
 
<div id="blue" style="width:100px; height: 30px; background-color: white"></div> 
 
<div id="green" style="width:100px; height: 30px; background-color: white"></div> 
 
<button id="play">Play</button> 
 
<h1 id="test"></h1>

Answer 3

我不是那么到jQuery的，但我可以看到你在以下行上有固定的颜色值：

$(this).css('background','red'); 

也许这是造成问题？