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

Question

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

谢谢。

Answer 1

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);

Answer 2

setTimeout(expression, timeout);超时后运行代码/函数一次。

setInterval(expression, timeout);以间隔运行代码/函数，它们之间的超时长度。

“setInterval”与“setTimeout”

因此setInterval，如果您想定期执行操作，请使用。

Answer 3

您可以使用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命令停止计时器。

Answer 4

您可以使用 setTimeout 功能。

setTimeout(function() {
      // Do something after 5 seconds
}, 2500)

Answer 5

尝试这个：

var step = 1;
var myInterval = setInterval(function(){
      if(step > 5){
           clearInterval(myInterval);
           return false;
      }
      $('#productimage').addClass('step'+step);
      step++;

}, 2500);