使用 jquery 的 Css3 动画延迟

Question

我正在使用滚动动画。我正在使用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 进行延迟吗？

Answer 1

您可以尝试使用setTimeout 函数。

setTimeout 有两个参数，一个回调函数和一个毫秒延迟。如果你想延迟 6 秒添加一个类，你可以这样做：

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

这将在被调用六秒后执行动画 (roughly)。

编辑：如果你想每次改变动画的长度，你可以这样做：setTimeout 必须被包裹在一个闭包中，以停止 i 的值在方法内改变。

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
});