jquery每个添加类中间延迟

I need to loop through each div .row to add or remove a flip class that has a CSS3 3D transform effect.

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

When I apply this add/remove class to each ".row" with jquery each(), all the divs get the class ".flip" added or removed at the exact same time. I need this to be delayed so it looks like a domino effect.

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

Any idea how I can get this working? Or how to add / remove the flip class one by one??

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

This is what I've found but it is not working:

这是我发现但它不起作用：

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

3 个解决方案

#1

The jQuery delay() method only delays the next pieces in the queue of strung together methods using $(obj).delay(500).addClass('flip'); It doesn't delay all subsequent lines of code. (check out the first example and how the code runs its animations side-by-side)

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

Try using setTimeout() instead.

请尝试使用setTimeout（）。

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

Fiddle

小提琴

3 个解决方案

#1

更多相关文章

随机推荐