delay on an event, such as change background color of div

Question

I am trying to use the <delay> for the delay of the event, such as change the background color. I want the event to follow the delay time I want, but the result shows me that they are not in the order I want. I am expecting the first one become red in 1 second. Then the second one become red in 2 seconds. Then the third one become red in 0.8 seconds. And I don't know how to make them the different color. Thank you very much for the help.

 $(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

 <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

You also need to use the loop to pick up colors:

 $(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 2

1st: instead of i=0; you can use index of div

2nd: for delayTime you can add a previous time to the new one to get the right delay time .. So if you have [1000 , 2000 , 800] the new delay time will be 1000 then 3000 then 3800 and so on

you can use this code

 $(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 3

I am not so into jQuery but I can see that you have fixed color value on the following line:

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

Maybe that is causing the problem?