每2.5秒向一个元素添加一个类

时间:2013-08-27 11:35:15

标签: jquery

我正在尝试使用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。这是错误的做法吗?

感谢。

5 个答案:

答案 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' vs 'setTimeout'

如果您想定期执行操作,请使用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);