javascript - 无法使 setTimeout 工作

Question

我正在为 webkit 制作一个简单的 css 动画。许多元素将滑入然后展开。

我的想法是保留单个 css 动画并通过使用 jquery 添加 slideIn 类来触发它。

.slideIn {
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-name: slideIn;
    clip: rect(0,125px,315px,0);
    }
@-webkit-keyframes slideIn {
    0% { -webkit-transform: translateX(0); }
    50% { -webkit-transform: translateX(-700px); clip: rect(0,125px,315px,0); }
    100% { -webkit-transform: translateX(-700px); clip: rect(0,550px,315px,0); }
}

正如我提到的，页面上有多个元素，我希望它们一个接一个地滑入。所以我需要一个一个地添加 slideIn 类，像这样:

var pref = "animated";
var animClass = "slideIn";
var eNumber = 5;
var interval = 10000;
animateMultiple(pref, eNumber, interval, animClass);

function animateMultiple(pref, eNumber, interval, animClass) {
    var i = 0;
    function addAnimClass() {
        i++;
        $('#' + pref + i).addClass(animClass);

        if(i < eNumber){
            setTimeout(addAnimClass(), interval);   
        }
    }
    addAnimClass ();
}

然而，这最终导致所有元素一起滑动。

为什么间隔没有任何作用？

Answer 1

setTimeout(addAnimClass(), interval);

您正在(立即)调用 addAnimClass 并将其返回值(undefined)传递给 setTimeout。

删除 ()。