delay() 在 each() 循环中没有按预期工作 (jQuery)

Question

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

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

jsFiddle: http://jsfiddle.net/r2vk7L5b/

似乎 delay() 方法在此循环中被忽略了。 index 变量也按预期传递。您可以通过控制台查看它以 0、1、2、3 等形式返回。

关于 each() 或 delay() 方法，我哪里不明白？

Answer 1

toggleClass 不是 jQuery 的 animation (effects) functions 之一（类似于 fadeIn），并且 delay 仅适用于 jQuery的动画功能。 toggleClass（以及 show 和 hide 以及其他几个基本功能）立即完成，即使在 [= =31=]效果队列。

要用非动画功能模拟delay，可以使用setTimeout:

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

Updated Fiddle

或者，考虑使用动画（效果）功能。

delay() 在 each() 循环中没有按预期工作 (jQuery)

delay() not working as expected inside of each() loop (jQuery)

javascript

each

foreach

jquery

delay