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以及其他几个基本功能）立即完成，即使jQuery中存在延迟或其他待处理的效果影响队列。

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

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

Updated Fiddle

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

在每个（）循环（jQuery）中，delay（）没有按预期工作

1 个答案: