jquery每个addclass之间有延迟

时间:2012-10-01 20:45:42

标签: jquery loops delay each setinterval

我需要遍历每个div .row来添加或删除具有CSS3 3D变换效果的翻转类。

当我使用jquery each()将这个添加/删除类应用于每个“.row”时,所有div都会在同一时间添加或删除类“.flip”。我需要这个延迟,所以它看起来像多米诺骨牌效应。

知道如何让这个工作吗?或者如何逐个添加/删除翻转类?

这是我发现的,但它不起作用:

  $('.row').each(function(i){
    if($(this).hasClass('flip')){
      $(this).delay(i*500).removeClass('flip');
    }else{
      $(this).delay(i*500).addClass('flip');
    }
  });

3 个答案:

答案 0 :(得分:22)

jQuery delay()方法只使用$(obj).delay(500).addClass('flip');延迟了串联方法队列中的下一个部分。它不会延迟所有后续代码行。 (查看first example以及代码如何并排运行其动画)

请尝试使用setTimeout()

$('.row').each(function(i){
  var row = $(this);
  setTimeout(function() {
    row.toggleClass('flip');
  }, 500*i);
});​

Fiddle

答案 1 :(得分:4)

您必须使用setTimeout来执行delay效果。

这是jsFiddle: http://jsfiddle.net/xQkmB/1/

var i = 0;
var rows = $(".row");
show();

function show() {
    if (i < rows.length) {
        $(rows[i]).show();
        i++;
        setTimeout(show, 1000);
    }       
}

答案 2 :(得分:1)

addClass函数不是动画函数,因此它不会排队,因此无需等待.delay()完成即可立即运行。

我使用此扩展来对非动画jQuery调用进行排队:

(function($) {
    $.fn.queued = function() {
        var self = this;
        var func = arguments[0];
        var args = [].slice.call(arguments, 1);
        return this.queue(function() {
            $.fn[func].apply(self, args).dequeue();
        });
    }
}(jQuery));

在你的代码中将被调用:

$('.row').each(function(i){
    $(this).delay(i*500).queued('toggleClass', 'flip');
}

注意:使用toggleClass代替条件添加/删除。