Opóźnienie animacji Css3 z jquery - jquery, css3, delay, css-animations

Używam animacji przewijania. Używam animate.css biblioteka i viewport.js. Działa jasno, ale chcę dynamicznie dodawać opóźnienia animacji, na przykład: Mam listę ikon mediów społecznościowych i chcę opóźnić animację każdego elementu.

To jest mój kod JS:

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

Mogę to zrobić pisząc klasę CSS dla każdego opóźnienia:

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

I użyj tego kodu JS:

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

To działa dobrze, ale muszę napisać klasy opóźnienia CSS dla wszystkich obiektów, które mają animację.Czy mogę dokonać opóźnień z jQuery bez użycia różnych klas CSS dla każdego obiektu?

Odpowiedzi:

Możesz spróbować użyć setTimeout funkcjonować.

setTimeout pobiera dwa argumenty, funkcję zwrotną i opóźnienie w ms. Jeśli chcesz opóźnić dodanie klasy o 6 sekund, możesz zrobić coś takiego:

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

To by zrobiło animację (w przybliżeniu) sześć sekund po wywołaniu.

EDYTOWAĆ: Jeśli chcesz zmienić długość animacji za każdym razem, możesz zrobić coś takiego: SetTimeout musi być zawinięty w zamknięcie, aby zatrzymać wartość zmiany w ramach metody.

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
});