Я хотел бы добавить класс в 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 меняет круг на синий. Но похоже, что синие переходят от одного к другому, и я хотел бы, чтобы один стал синим, тогда они все снова станут красными, прежде чем другой круг станет синим.

2
ADRIAN 17 Дек 2015 в 13:04

3 ответа

Лучший ответ
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/

1
Maurice Perry 17 Дек 2015 в 11:34

Как насчет использования метода delay () в jQuery? 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);
0
Dmitri Sologoubenko 17 Дек 2015 в 12:31

Может быть, вы можете попытаться добавить дополнительную задержку в каждой итерации ... [Обновленный код]

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();
0
Keyboard ninja 17 Дек 2015 в 12:20