Как сделать поочередное появление и скрытие элементов для нескольких наборов элементов?

Question

[Eugene_Koi]

Есть два контейнера container1 и container2, в каждом из которых находится определенное количество элементов:

<div class="container1 container">
<div class="good">Текст 1</div>
<div class="good">Текст 2</div>
<div class="good">Текст 3</div>
<div class="good">Текст 4</div>
</div>

<div class="container2 container">
<div class="good">Текст 5</div>
<div class="good">Текст 6</div>
<div class="good">Текст 7</div>
<div class="good">Текст 8</div>
</div>

Как сделать так, чтобы изначально был показан только первый элемент в каждом из контейнеров и потом через определенное время он исчезал и заменялся следующим и так по кругу? Перебор должен происходить одновременно в container1 и container2.

Answer 1

[0xD34F]

Так:

function toggleWithInterval(selector, delay) {
  let index = -1;

  return setInterval(function($items) {
    $items.eq(index).hide();
    index = (index + 1) % $items.length;
    $items.eq(index).show();
  }, delay, $(selector).hide());
}

toggleWithInterval('.container1 > .good', 1000);
toggleWithInterval('.container2 > .good', 300);

??

Comments

[Eugene_Koi]

Да, то что нужно, спасибо!