為每個選定的元素設置不同的超時

Question

我目前正在使用以下腳本向<li>項目添加類名稱“ animate”：

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

但是此腳本立即將類設置為選定的元素。

如何使用一秒鍾的緩沖區將類添加到下一個選定的元素？

例如：加載頁面后，腳本將第一個li賦予類“ animate”。 1秒后，第二個li獲得“動畫”類。 2秒后，第三個li獲得“動畫”課。

我怎樣才能達到這種效果？

Answer 1

循環所有元素並設置超時。

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

應該管用。 參見http://api.jquery.com/each/和https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout

Answer 2

嘗試：

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