Estoy tratando de usar <delay> para el retraso del evento, como cambiar el color de fondo. Quiero que el evento siga el tiempo de retraso que quiero, pero el resultado me muestra que no están en el orden que quiero. Espero que el primero se vuelva rojo en 1 segundo. Luego el segundo se vuelve rojo en 2 segundos. Luego, el tercero se vuelve rojo en 0.8 segundos. Y no sé cómo hacerlos del color diferente. Muchas gracias por la ayuda.

$(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>
1
tiger 14 may. 2016 a las 12:56

3 respuestas

La mejor respuesta

1er: en lugar de i=0; puedes usar index of div

2º: para delayTime puede agregar un tiempo anterior al nuevo para obtener el tiempo de retraso correcto. Entonces, si tiene [1000, 2000, 800], el nuevo tiempo de retraso será 1000, luego 3000 y luego 3800 y así sucesivamente

Puedes usar este código

$(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>
1
Mohamed-Yousef 14 may. 2016 a las 11:12

También debe usar el bucle para elegir colores:

$(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>
2
G-Cyrillus 14 may. 2016 a las 10:27

No estoy tan interesado en jQuery, pero puedo ver que tiene un valor de color fijo en la siguiente línea:

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

Tal vez eso está causando el problema?

-2
marc_s 14 may. 2016 a las 11:41