Задержка на событии, например изменение цвета фона 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

первый: вместо 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'); 

Возможно, это вызывает проблему?