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类，像somtehing一样：

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。

删除()。

无法让setTimeout工作

1 个答案: