我正在为 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 ();
}
然而,这最终导致所有元素一起滑动。
为什么间隔没有任何作用?
最佳答案
setTimeout(addAnimClass(), interval);
您正在(立即)调用 addAnimClass
并将其返回值(undefined
)传递给 setTimeout
。
删除 ()
。
关于javascript - 无法使 setTimeout 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20369998/