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

回答

相關問題