javascript - 選択した要素ごとに異なるタイムアウトを設定します

Question

<li>現在、このスクリプトを使用してアイテムにクラス名「animate」を追加しています。

$('.list-blocks li').addClass('animate');

ただし、このスクリプトは、クラスを選択した要素にすぐに設定します。

1秒のバッファで次に選択した要素にクラスを追加するにはどうすればよいですか？

例：ページが読み込まれた後、スクリプトは最初liのクラスに「animate」を与えます。1秒後、2番目liはクラス「animate」を取得します。そして2秒後、3番目liはクラス「animate」を取得します。

どうすればこの効果を達成できますか？

score 4 · Accepted Answer

すべての要素をループし、タイムアウトを設定します。

$('.list-blocks li').each(function(index, elm) {
    setTimeout(function () {
        $(elm).addClass('animate');
    }, index*1000);
});

score 3 · Accepted Answer

試す：

$('.list-blocks li').each(function (index) {
  var item = $(this);
  setTimeout(function () {
    item.addClass('animate');
  }, index * 1000);
});

2 に答える 2