使用jQuery触发顺序动画.css动画

Question

我试图通过使用jQuery依次动画元素。我尝试完成的方法是在每个应该动画的元素上添加"animated fadeInDown"类，延迟500毫秒。

我遇到的问题是，jQuery(或如果我使用settimeout函数)将触发所有动画在同一时间。

下面是我的代码:

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

我做错了什么?

Answer 1

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

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

你必须确保你的类有适当的CSS过渡，如果你想动画他们的变化。