jQuery一次突出顯示一個

Question

我試圖在單擊button後，將一個類添加到li元素中。 我們的目標是一次添加一個類，延遲時間介於兩者之間。它似乎與fadeOut函數正常工作，但與addClass或相關函數無關。

這裏是一個Jsfiddle.net演示http://jsfiddle.net/4ANCj/3/

和部分代碼

$("button").click(function() { 
    $('li').each(function(index) { 
     $(this).delay(900*index).addClass("hi"); 
    }); 
}); 

的我知道有一個similar問題在這裏SO但它不會削減它。

Answer 1

addClass不是一個動畫函數，所以它不會被添加到效果隊列中。您可以使用.queue^[docs]代替（默認添加到隊列效果）：

$(this).delay(900*index).queue(function(next) { 
    $(this).addClass("hi"); 
    next(); 
}); 

或者使用setTimeout^[MDN]一個非jQuery的解決方案：

$("button").click(function() { 
    var lis = $('li').get(); 

    function run() { 
     var li; 
     if(li = lis.shift()) { 
      $(li).addClass('hi'); 
      setTimeout(run, 900); 
     } 
    } 

    setTimeout(run, 900); 
});