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); 
});