javascript - 前回終了時のjQuery起動関数

Question

私は5つのテキストノードを持っています

<h2 class="textillate"> test </h2>
<h2 class="textillate"> test </h2>
<h2 class="textillate"> test </h2>
<h2 class="textillate"> test </h2>
<h2 class="textillate"> test </h2>

前のノードが終了したら、これらのノードを 1 つずつテキスタイル化したいと考えています。

私はこれを試しましたが、うまくいきませんでした:(

$(document).ready(function() {
nodes = $('.textillate');
nodes.eq(0).textillate()
.eq(1).textillate();
});

Answer 1

それぞれjQueryはどうですか？

$(document).ready(function() {
    $('.textillate').each(function(index, element) {
        $(element).textillate();
    });
});

関数を次々に実行したいので、 for ループだけではないのはなぜですか：

var items = $('.textillate')
for(var i = 0; i < items.size(); i++) {
    $(items[i]).textillate();
}

Answer 2

私が理解できるように、次のテキストを呼び出すには、1 つのテキストが終了するのを待つ必要があります。Textillate API を読みましたが、コールバック/約束のオプションがありません。

textillate はコールバック メカニズムを提供しないため、アニメーションがいつ終了したかを正確に知ることは不可能です。各アニメーションの長さがわからない場合は、1 つのアニメーションが終了するのを待って次のアニメーションを呼び出すことができます。

Textillate を各要素に同時に適用する場合は、次を使用します。

$('.textillate').textillate();