Question

我遇到一个问题，我在一个vanilla javascript'for'循环中使用JQuery .animate（）。问题是我的所有动画都是同时发生的。

var generatedArray = [];
var userArray = [];

var round  = 0;
var sequenceLength = 1;


function init(){
  //resets all the  variables incase it is pressed after game has started
  generatedArray = [];
  userArray = [];
  round  = 0;
  sequenceLength = 1;
  //produces an array of twenty numbers 1 - 9;
  for (var i = 0; i < 20; i++){
    generatedArray[i] = Math.floor(Math.random() * 9) + 1;
  }
  displaySequence();
}

function displaySequence(){
    for (var i = 0; i < generatedArray.length; i++){
      $('#C' + generatedArray[i]).animate({opacity:0.1},500).animate({opacity: 1}, 100);

   }
}

//JQUERY CALLS
  //Buttons calls
  $('#startGame').click(function(){
    init();   
    console.log(generatedArray);
  });

有没有办法延迟循环执行，或者我应该使用完全不同的方法。到目前为止，这是完整的代码：

togglePaging()

由于

Answer 1

对于特定的情况，只需使用jQuery＆＃39; delay，这将延迟动画（而不是for循环）：

for (var i = 0; i < generatedArray.length; i++){
  $('#C' + generatedArray[i]).delay(600 * i).animate({opacity: 0.1},500).animate({opacity: 1}, 100);
  // ------------------------^^^^^^^^^^^^^^^
}

600是两个动画的组合长度，因此乘以i会延迟第一个元素（0毫秒），第二个元素600毫秒，第三个1200毫秒等等。如果你想在下一次开始之前完成一个短暂的差距，可能想要在那里增加更多的时间（620ms，无论如何）。

Answer 2

您可以使用.queue()

$({}).queue("_fx", $.map(generatedArray, function(el) {
  return function(next) {
    $("#C" + el).animate({opacity: 0.1}, 500, function() {
      $(this).animate({opacity: 1}, 100, next)
    })
  }
})).dequeue("_fx")

Javascript：'for'循环执行之间的延迟

2 个答案: