如何一个接一个地为块设置动画？

Question

使用这段 JavaScript，我希望通过添加时间超过 500 毫秒的 CSS 动画类，一个接一个地为一些块元素设置动画。

不幸的是，它等待了一次，并且所有的盒子在等待后立即向上滑动。

这是目前为止的脚本：

var blocks = $('.block');

blocks.each(function(index, obj) {
    var block = $(obj);
    setTimeout(function() {
        block.addClass('animated slideInUp');
    }, 500);
});

那么，如何异步添加这些类，以便页面上的框一个接一个地向上滑动？

Answer 1

您可以考虑each() 循环的index，这样setTimeout() 中的时间将是500 的倍数。这样，这些框将出现在每个500 毫秒内，因为setTimeout() 的超时时间为500、1000、1500、...等等。

var blocks = $('.block');
blocks.each(function(index, obj) {
    var block = $(obj);
    setTimeout(function() {
        block.addClass('animated slideInUp');
    }, 500*index);
});