javascript - 带有 .wait 和 .animate 的 jQuery 顺序 CSS 动画

Question

我正在编写一个简单的 Simon Says 游戏，并尝试通过一系列“按下”来为四个游戏方 block 制作动画。按下只是先降低然后再增加此图 block 的不透明度。这是我的 JSFiddle:https://jsfiddle.net/thmsdnnr/ru0b73vq/6/

function playSequence(seq) {
  var idTranslate=["","#red","#green","#blue","#yellow"];
  for (var i=0;i<seq.length;i++) {
  var selector=idTranslate[seq[i]];
  $(selector).delay(500*i).animate({opacity: 0.4},100).animate({opacity: 1.0},350);
  }
}

我称之为测试:

var testSeq = [1,2,3,4,4,2,1];
playSequence(testSeq);

代码工作正常，直到它到达数组索引 4 处的图 block 4 的第二个实例。奇怪的是，它挂起，然后似乎非常快速地“按下”磁贴 2(索引 5)和 1(索引 6)，然后在动画的结尾而不是在动画中按磁贴 4之间。

我不知道为什么动画会卡在这里。无论我使用何种测试序列(例如，testSeq=[1,2,1,1,4];)，每当我尝试多次按下同一个图 block 时，都会发生相同的行为。

Answer 1

我没有使用 .delay()，而是 fork 了你的 fiddle 并使用了 setTimeout()。 Take a look at it here ，看看它是否符合您的要求。如果我不得不冒险猜测的话，div 上的堆叠延迟会导致一些奇怪的添加。

playAnim = function(el, delay) {
  setTimeout(function() {
    el.animate({
      opacity: 0.4
    }, 100).animate({
      opacity: 1.0
    }, 350)

  }, delay)
}