jQuery Sequential CSS动画与.wait和.animate

我正在编码一个简单的西蒙说游戏，并试图用一系列“按”动画四个游戏瓷砖。新闻只是一个减少，然后增加这个瓷砖的不透明度。这里是我的jsfiddle：https://jsfiddle.net/thmsdnnr/ru0b73vq/6/jQuery Sequential CSS动画与.wait和.animate

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到达瓦4的第二个实例。奇怪的是，它挂起，然后看起来非常快速地按下瓦片2（索引5）然后是1（索引6），然后在动画的非常接近的端部而不是在之间按压瓦片4。

我不知道为什么动画在这里挂了。无论我使用的测试顺序如何（例如，testSeq = [1,2,1,1,4];），只要我多次尝试按同一个瓦片，就会发生同样的行为。

来源

2016-12-27 thmsdnnr

而不是使用.delay（），我已经分叉你的小提琴并使用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) 
 
}

来源

2016-12-27 19:15:43 Snowmonkey

这工作太棒了。我的原始代码是一个糟糕的设计模式还是糟糕的方法选择？我一直在阅读jQuery文档，并试图弄清楚为什么它会以这种方式行事不端。尽管我可能会忽略某些愚蠢的东西，但我仍然对这些东西很陌生。也许我不应该选择.delay（）。大多数网站都说“只使用setTimeout（）”。也许只是接受并继续前进！ :) – thmsdnnr

当多次调用元素的delay（）时，似乎出现了一个奇怪的故障。这可能是一个有趣的实验，以确定究竟发生了什么（我的猜测是延迟（）被堆叠，所以在第一次延迟倒计时完成第二次启动后），但setTimeout是一个快速和简单的修复。 – Snowmonkey

jQuery Sequential CSS动画与.wait和.animate

回答

相关问题