Как сделать смену opacity каждые 5 сек?

Question

[Михаил]

Здравствуйте! Весь вчерашний день ломал голову, мне нужно, чтобы блоки, которые за счет absolute лежат друг на друге, каждые 5 сек менялись. Я это сделал так, что изначально они все скрыты, потом через секунду появляется первый блок, затем 2-ой, 3-ий, после четвертого они все исчезают и всё заново. Изначально всё идет как надо, но после появления 4-ого блока начинается вакханалия, блоки рандомно появляются и исчезают, без какой-либо последовательности. Скорее всего я неправильно использую setInterval, отчасти я понимаю, почему так происходит, но никак не могу это решить, буду крайне благодарен, если поможете) https://jsfiddle.net/v5de40ng/

Answer 1

[Tim]

примерно так

let i = 1;
setInterval(() => {
    $('#sloi' + i).fadeIn('slow');
    if (i > 4) {
        i = 1;
        $('#sloi2, #sloi3, #sloi4').fadeOut('slow');
    }
    i++;
}, 5000)

Comments

[Михаил]

Спасибо, но перечисление всех id как-то не очень) Но все равно спасибо)

Answer 2

[0xD34F]

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

  return setInterval($items => {
    $items.eq(index).fadeOut('slow');
    index = (index + 1) % $items.length;
    $items.eq(index).fadeIn('slow');
  }, delay, $(selector));
}


const intervalId = fadeToggle('.sloi', 1000);

Comments

[Михаил]

Спасибо огромное, именно то, что нужно)

[Михаил]

Можешь, пожалуйста, вкратце объяснить, как это работает? Хочу разобраться)

[0xD34F]

Михаил, не хотите. Хотели бы - попытались бы сделать это самостоятельно, и, в случае неудачи, задавали бы более конкретные вопросы вместо "как это работает?".

[Михаил]

0xD34F, эм...вообще-то я пытался сделать это сам, просто другим путём. Тут же какая-то новая для меня структура, просто хочу понять, как она работает

[0xD34F]

Михаил, под "сделать" и имелось в виду "разобраться". Не хотите вы разбираться.

[Михаил]

0xD34F, -_-