Question

我想在div中添加一个类，然后删除该类并转到下一个div并执行相同的操作。以下工作几乎完美：

var f = jQuery('.ls-slide').find('div.main-img-label');

function recursive(i) {
    f.removeClass('blue-flash').eq(i).addClass('blue-flash');
    setTimeout(function () {
        recursive(++i % f.length)
    }, 3000);
}
recursive(0);

唯一的区别是我希望在删除课程和在下一个课程中添加课程之间有时间延迟。

例如，div.main-img-label是一个红色圆圈，蓝色闪光类将圆圈更改为蓝色。但看起来蓝色从一个移动到另一个，我希望一个变为蓝色，然后在另一个圆圈变成蓝色之前它们全部变红。

Answer 1

function recursive(i) {
    f.removeClass('blue-flash');
    setTimeout(function () {
        f.eq(i).addClass('blue-flash');
    }, 1000);
    setTimeout(function () {
        recursive(++i % f.length)
    }, 3000);
}

或

function recursive(i) {
    f.removeClass('blue-flash');
    setTimeout(function () {
        f.eq(i).addClass('blue-flash');
        setTimeout(function () {
            recursive(++i % f.length)
        }, 2000);
    }, 1000);
}

更新：在这里摆弄：https://jsfiddle.net/robbyn/9ya46tj4/

Answer 2

也许你可以尝试在每次迭代中添加一些额外的延迟...... [更新代码]

function flashLoop(){
var timeout = (1000 * $('.main-img-label').length);
  setInterval(function(){
  $.each($('.main-img-label'), function(i, el){
      setTimeout(function(){
         $(el).addClass('blue-flash');
          setTimeout(function(){
              $(el).removeClass('blue-flash');
          },500);
      },1000 + ( i * 1000 ));
  });
  }, timeout);
}
    flashLoop();

Answer 3

如何使用jQuery的delay（）方法？ https://api.jquery.com/delay/

类似的东西：

var f = jQuery('.ls-slide').find('div.main-img-label');

function recursive(i) {
    f.removeClass('blue-flash').delay(800)
     .eq(i).addClass('blue-flash');
    setTimeout(function () {
        recursive(++i % f.length)
    }, 3000);
}
recursive(0);

jQuery在列表中添加删除类，延迟时间介于

3 个答案: