Javascript delay（）在每个（）循环（jQuery）内未按预期工作

我有一系列的元素，我想在视图中按顺序切换。我正在使用

控制此操作：

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

jsFiddle：

在这个循环中，

delay（）

方法似乎被忽略了。

索引

变量也按预期传递。您可以通过控制台看到它返回为0、1、2、3等

---

关于

each（）

或

delay（）

方法，我在这里没有理解什么？

toggleClass

不是jQuery的方法之一（比如

fadeIn

），而

delay

只适用于jQuery的动画功能<代码>切换类（和

显示

和

隐藏

以及其他一些基本功能）立即完成，即使jQuery效果队列中有延迟或其他效果挂起

要使用非动画功能模拟

延迟

，可以使用

设置超时

：

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

---

或者交替地考虑使用动画（效果）函数。< /P> <代码>。延迟（）>代码>只适用于动画队列。code>.toggleClass（）不会创建一个。也许可以使用旧的

setTimeout（）

？此外，请记住基本算术中的优先级：乘法先于加法。您应该使用

600*（index+1）

，而不是

600*index+1

。因此，我的印象是延迟不会叠加，因此它会直接跳到下一个函数调用。以下是一些变通策略。您将在我的JSFIDLE中看到，我有一个隐藏元素的类。我确实想通过向元素添加或删除类来控制这一点。@invot:

setTimeout

版本就是这样做的。如果jQuery的动画功能之一是

toggleClass

，它完全可以实现您的

delay

版本所能实现的功能。我完全不知道

toggleClass

不是动画效果。我不知道

delay（）
delay
延迟了某些功能的效果，而不是其他功能的效果，这一事实让很多人感到困惑（人们通常希望它与
show
和
hide
一起工作，但这里的概念是相同的）。