延迟（）在每个（）循环内没有按预期工作（jQuery）

我有一系列元素想要按顺序切换进出视图。我正在使用一个<button class="toggle">来控制这个：

$('.toggle').click(function(){
    $('.squares span').each(function(index){
      $(this).delay(600*index+1).toggleClass('hide');
    });
});

js小提琴：http://jsfiddle.net/r2vk7L5b/

看来delay()方法在此循环中被简单地忽略。这index变量也按预期传递。您可以通过控制台看到它返回为 0,1,2,3 等。

我不明白的是each() or delay() method?

toggleClass不是 jQuery 之一动画（效果）函数 (like fadeIn), and delay仅适用于 jQuery 的动画功能。toggleClass (and show and hide和其他几个基本功能）已完成立即地，即使 jQuery 效果队列中有延迟或其他待处理的效果。

模拟delay对于非动画功能，您可以使用setTimeout:

$('.toggle').click(function(){
    $('.squares span').each(function(index){
      var $this = $(this);
      setTimeout(function() {
          $this.toggleClass('hide');
      }, 600*index+1);
    });
});

更新了小提琴

或者，考虑使用动画（效果）函数。