我需要遍历每个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');
}
});
答案 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);
});
答案 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
代替条件添加/删除。