Question

我正在编写一个简单的Simon Says游戏，并尝试用一系列＆＃34;按下＃34;来设置四个游戏牌的动画。压力只是减少，然后增加该瓷砖的不透明度。这是我的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处的tile 4的第二个实例。奇怪的是，它挂了，然后出现在＆＃34;按＆＃34; tile 2（索引5）然后是1（索引6）非常快，然后在动画的 end 处按下tile 4，而不是在其间。

我无法解释为什么动画会挂在这里。无论我使用何种测试序列（例如，testSeq = [1,2,1,1,4];），我都会尝试多次按下同一个图块时发生相同的行为。

Answer 1

我没有使用.delay（），而是分叉你的小提琴并使用了setTimeout（）。 Take a look at it here，看看它是否符合您的要求。如果我不得不冒险猜测，那些关于div的堆叠延迟的东西会引起一些奇怪的加法。

＆＃13;

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

＆＃13;

使用.wait和.animate的jQuery顺序CSS动画

1 个答案: