2

スクロールアニメーションを使用しています。私は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 遅延クラスを作成する必要があります。オブジェクトごとに異なる CSS クラスを使用せずに、jQuery で遅延を作成できますか?

4

1 に答える 1

1

setTimeout関数を使用してみてください。

setTimeoutコールバック関数とミリ秒単位の遅延の 2 つの引数を取ります。クラスの追加を 6 秒遅らせたい場合は、次のようにします。

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

これにより、呼び出されてから約6 秒後にアニメーションが実行されます。

編集:アニメーションの長さを毎回変更したい場合は、次 のようにすることができます: setTimeout をクロージャでラップして、メソッド内での i の値の変更を停止する必要があります。

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
});
于 2013-09-05T13:26:44.650 に答える