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

我正在尝试使用来延迟事件，例如更改背景颜色。 我希望事件能够跟随我想要的延迟时间，但结果告诉我他们不是我想要的顺序。 我期待第一个在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'); next(); }); i++; }); // end of each }); }); // end ready 

   
 
 
 Play 
 

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 

  
 
 
 Play 
 

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 

  
 
 
 Play 
 

Answer 3

我不是很喜欢jQuery，但我可以看到你在以下行中有固定的颜色值：

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

也许那是造成这个问题的？