jquery - 使用 jQuery 触发连续的 animated.css 动画

Question

我正在尝试使用 jQuery 按顺序为元素设置动画。我试图实现的方法是在每个应该设置动画的元素上添加“动画 fadeInDown”类，延迟 500 毫秒。

我遇到的问题是 jQuery(或者如果我使用 setTimetout 函数)将同时触发所有动画。

这是我的代码:

$('.row-assets .asset').each(function(i) {
    $(this).delay((i++) * 500).addClass('animated').addClass('fadeInDown');
});

我做错了什么？

Answer 1

addClass() 不是 jQuery 动画队列的一部分，因此不受 delay() 的影响。正确使用 setTimeout 应该有效:

DEMO

var addClassToEl = function($el) {
    $el.addClass('animated fadeInDown');
};

$('.row-assets .asset').each(function(i, el) {
    setTimeout(function() {addClassToEl($(el))}, i++ * 500);
});

如果您想要动画化它们的变化，您必须确保您的类具有适当的 CSS 过渡。