jquery每个添加类中间延迟

Question

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

Answer 1

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

请尝试使用setTimeout().

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

小提琴