带jquery的Css3动画延迟

我正在使用滚动动画。我正在使用

animate.css

库和

viewport.js

。很明显，它起作用了。但我想动态添加动画延迟。例如：我有社交媒体图标列表，我想延迟每个项目的动画

这是我的JS代码：

$(".animateda:in-viewport(-10)").find(".animated").each(function(queue) {
    $(this).addClass($(this).attr("data-animation"));
});

我可以为每个延迟编写一个CSS类：

.animate-delay-1{animation-duration:.6s;animation-delay:.3s}
.animate-delay-2{animation-duration:.6s;animation-delay:.6s}.....

并使用以下JS代码：

$(this).find(".animated-item").each(function(queue) {
    $(this).addClass("animate-delay-"+(queue+1)).addClass($(this).attr("data-animation"));
});

它工作得很好。但是我必须为所有有动画的对象编写一个CSS延迟类。我可以在不为每个对象使用不同CSS类的情况下使用jQuery进行延迟吗？

您可以尝试使用该函数

setTimeout

接受两个参数，一个回调函数和一个毫秒延迟。如果要将类的添加延迟6秒，可以执行以下操作：

var delay = 6000;
$(".animateda:in-viewport(-10)").find(".animated").each(function(queue) {
    setTimeout(function() {
        // do some animation here
    }, delay);
});

这将在调用动画（）六秒钟后执行动画（）

编辑：如果每次都要更改动画的长度，可以执行以下操作：setTimeout必须包装在闭包中，以停止在方法中更改i的值

---

好的，但这是添加所有项目延迟。我想让它1.项目3s延迟2.项目6s延迟3.项目9s延迟…对不起，你必须更清楚一点。哪些项目需要延迟，延迟多长时间？我想自动完成。例如，我的列表有6项。我想写循环I=0i*350i++。但是我不知道我怎么写：）这就是你的意思吗？对不起，它不起作用，我还在试，但它不起作用

var i = 0;
$(".animateda:in-viewport(-10)").find(".animated").each(function(queue) {
    (function(i) {
        setTimeout(function() {
            // do some animation here
        }, i * 350);
    })(i);
    i++; // increment i for each item
});