Question

借助这一段JavaScript，我希望通过添加CSS动画类（时间不超过500毫秒）来使某个块元素一个接一个地动画。

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

这是到目前为止的脚本：

var blocks = $('.block');

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

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

Answer 1

您可以考虑index循环的each()，以便在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);
});

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

1 个答案: