css3動畫與jquery延遲

Question

我正在使用滾動動畫。我正在使用animate.css庫和viewport.js。這顯然是工作。但我想動態添加動畫延遲。例如：我有社交媒體圖標列表，我想延遲每個項目的動畫。

這是我的JS代碼：

$(".animateda:in-viewport(-10)").find(".animated").each(function(queue) { 
    $(this).addClass($(this).attr("data-animation")); 
}); 

我可以寫爲每延遲一個CSS類做到這一點：

.animate-delay-1{animation-duration:.6s;animation-delay:.3s} 
.animate-delay-2{animation-duration:.6s;animation-delay:.6s}..... 

，並使用此JS代碼：

$(this).find(".animated-item").each(function(queue) { 
    $(this).addClass("animate-delay-"+(queue+1)).addClass($(this).attr("data-animation")); 
}); 

它運作良好。但是我必須爲所有具有動畫的對象編寫CSS延遲類。我可以使用jQuery進行延遲，而無需爲每個對象使用不同的CSS類？

Answer 1

您可以嘗試使用setTimeout函數。

setTimeout有兩個參數，一個回調函數和一個毫秒延遲。如果你想通過6秒延遲一類的增加，你可以做這樣的事情：

var delay = 6000; 
$(".animateda:in-viewport(-10)").find(".animated").each(function(queue) { 
    setTimeout(function() { 
     // do some animation here 
    }, delay); 
}); 

這會做動畫（roughly）它的Six秒後。

編輯：如果你想每次更改動畫的長度，你可以做這樣的事情：的setTimeout的，必須被包裹在一個封閉，停止的方法中我改變的價值。

var i = 0; 
$(".animateda:in-viewport(-10)").find(".animated").each(function(queue) { 
    (function(i) { 
     setTimeout(function() { 
      // do some animation here 
     }, i * 350); 
    })(i); 
    i++; // increment i for each item 
});