jquery每个添加类中间延迟

我需要遍历每个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');延迟串联方法队列中的下一个部分$(obj).delay(500).addClass('flip'); 它不会延迟所有后续代码行。 （查看第一个示例以及代码如何并行运行其动画）

请尝试使用setTimeout() 。

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

小提琴

Answer 2

您必须使用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); } } 

Answer 3

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