2

I am using scroll animations. I'm using animate.css library and viewport.js. It's clearly working. But I want to dynamically add animation delays. For example: I have social media icon list and I want to delay the animation for each item.

This is my JS code:

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

I can do it by writing a CSS class for each delay:

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

And use this JS code:

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

It's working good. But I must write a CSS delay class for all of the objects that have a animation. Can I make the delays with jQuery without using different CSS classes for each object?

4

1 回答 1

1

您可以尝试使用setTimeout函数。

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

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

这将在它被调用六秒后执行动画（大约）。

编辑：如果你想每次改变动画的长度，你可以这样做： 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
});
于 2013-09-05T13:26:44.650 回答