JQuery. Показывать и скрывать блоки по кругу

299

09 ноября 2021, 04:10

У меня есть 6 блоков div. Изначально они скрыты. Нужно показать первый div, через секунду второй, потом третий и т.д.

Задача в том, чтобы показывать length-1 (на один меньше общего количества) элементов и при появлении пятого (предпоследнего) первый скрывать, а после появления шестого снова показывается первый, потом второй и так далее по бесконечному кругу:

jQuery(document).ready(function() { 
 
    var delay = 0, 
        notes = $('.b-notification'); 
 
    notes.each(function() { 
        var note = $(this); 
 
        setInterval(function() { 
            note.addClass('show'); 
        }, delay+=1000); 
    }); 
 
 
});

.b-notification { 
  display: none; 
} 
 
.b-notification.show { 
  display: block; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="b-notification">1</div> 
<div class="b-notification">2</div> 
<div class="b-notification">3</div> 
<div class="b-notification">4</div> 
<div class="b-notification">5</div> 
<div class="b-notification">6</div>

https://codepen.io/astrolavrov/pen/XWWxOqX

На кодпене смог сделать добавление класса .show с периодом в одну секунду. Но не получается зациклить этот код.

Answer 1

jQuery(document).ready(function() { 
  var index = 0, maxShow = 4, 
    notes = $('.b-notification'); 
 
  setInterval(function() { 
    var note = notes.eq(index); 
    note.addClass('show'); 
    if (notes.filter('.show').length > maxShow) { 
      note.parent().append(note); 
      $('.b-notification.show').eq(0).removeClass('show'); 
    } 
    index = ++index % notes.length; 
  }, 1000); 
});

.b-notification { 
  display: none; 
} 
 
.b-notification.show { 
  display: block; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="b-notification">1</div> 
<div class="b-notification">2</div> 
<div class="b-notification">3</div> 
<div class="b-notification">4</div> 
<div class="b-notification">5</div> 
<div class="b-notification">6</div>