8

我需要遍历每个 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');
    }
  });
4

3 回答 3

25

jQuerydelay()方法仅使用延迟串在一起的方法队列中的下一部分，$(obj).delay(500).addClass('flip'); 它不会延迟所有后续代码行。（查看第一个示例以及代码如何并排运行动画）

尝试setTimeout()改用。

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

小提琴

于 2012-10-01T21:01:42.720 回答
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);
    }       
}
于 2012-10-01T21:02:49.983 回答
2

该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而不是条件添加/删除。

于 2012-10-01T21:05:58.023 回答