jQuery在列表中添加删除类，中间有延迟答案

【问题标题】：jQuery add remove class on list with a delay in betweenjQuery在列表中添加删除类，中间有延迟
【发布时间】：2015-12-17 10:04:20
【问题描述】：

我想向 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 是一个红色圆圈，类 blue-flash 将圆圈变为蓝色。但看起来蓝色从一个移动到另一个，我希望一个变成蓝色，然后在另一个圆圈变成蓝色之前它们都变成红色。

【问题讨论】：

将addClass 语句移到超时内。 var f = jQuery('.ls-slide').find('div.main-img-label'); function recursive(i) { f.removeClass('blue-flash') setTimeout(function () { f.eq(i).addClass('blue-flash'); recursive(++i % f.length) }, 3000); } recursive(0);
感谢您的回复，该更改没有变蓝

标签： javascript jquery

【解决方案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/

【讨论】：

感谢您的回复，这两个选项都不起作用，圆圈永远不会改变颜色。
是的，你是对的，非常抱歉。谢谢您的帮助！我使用了 jfiddle 示例

【解决方案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();

【讨论】：

感谢您的回复，这并没有改变，改变仍然是即时的，没有延迟
你能不能加个小提琴让我看看你在做什么？
好的，这是 jfiddle 结果：jsfiddle.net/adeblath/3n6ot1qk/1/embedded/result我如何分享整个事情？
“整个事情”的链接是这样的：jsfiddle.net/adeblath/3n6ot1qk/1/light 但是你到底想做什么？
我只想在颜色变化之间有一个延迟，所以在下一个变成蓝色之前所有的圆圈都是红色的。目前它直接移动到下一个，我想在下一个变为蓝色之前暂停半秒

【解决方案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);

【讨论】：