我正在尝试使用delay()每隔2.5秒向元素添加一个类:
$(".play").click(function(e) {
e.preventDefault();
$('#productimage').addClass('step1');
$('#productimage').delay(2500).addClass('step2');
$('#productimage').delay(5000).addClass('step3');
$('#productimage').delay(7500).addClass('step4');
$('#productimage').delay(10000).addClass('step5');
});
它不会起作用,因为它会立即添加类step5。这是错误的做法吗?
感谢。
答案 0 :(得分:2)
delay()
用于延迟动画。使用setTimeout()
:
var delay = 0;
for(var i = 0; i<=5; i++){
setTimeout(function(){
$('#productimage').addClass('step' + (i+1));
},delay);
delay += 2500;
}
或者正如@DipeshParmar所提到的,setInterval
可能更适合这种情况。记得在完成后清除间隔:
var handle = setInterval(function(){ /* do stuff */ }, 2500);
//When you're done:
clearInterval(handle);
答案 1 :(得分:1)
setTimeout(expression, timeout);
在超时后运行一次代码/函数。
setInterval(expression, timeout);
以间隔运行代码/函数,它们之间的超时长度。
如果您想定期执行操作,请使用setInterval
。
答案 2 :(得分:0)
您可以使用setInterval
以特定间隔执行某些代码。您必须定义一个停止条件(您想要的步数 - num_steps
)。
对于每次迭代,只需添加您从文本“step”汇总的类名和循环所在的当前步骤。
var num_steps = 5;
var cur_step = 1;
var timer = setTimeout( function(){
$('#productimage').addClass( 'step' + cur_step );
cur_step += 1;
if ( cur_step > num_steps ){
clearInterval( timer );
}
}, 2500 );
如果我们在迭代时达到了所需的数字,我们就会使用clearInterval
命令停止计时器。
答案 3 :(得分:0)
您可以使用setTimeout函数。
setTimeout(function() {
// Do something after 5 seconds
}, 2500)
答案 4 :(得分:0)
试试这个:
var step = 1;
var myInterval = setInterval(function(){
if(step > 5){
clearInterval(myInterval);
return false;
}
$('#productimage').addClass('step'+step);
step++;
}, 2500);