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

Question

[Шамуэй]

Как сделать чтобы после добавления большого количества div блоков через время они начали пропадать плавно и по одному, а не всё вместе?

<style type="text/css">
#here-show{
  position: fixed;
  bottom: 0;
  z-index: 4;
}
button{

}
  .my-snackbars{
  
    width: 200px;
    height: 40px;
    background: rgba(0, 0, 0, 0.8); /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    margin-top: 2px;
   
  }
.close-block {
  
  top: 0px;
  right: -8px;
  width: 16px;
  height: 40px;
 
  cursor: pointer;
}
</style>

<script>
  $(document).ready(function(){
    $('.create').click(function(){

      $('#here-show').prepend(
      `
        <div class="my-snackbars">

        ТЕКСТ
          <span class='close-block'>&times;</span> <!--кнопка закрытия-->
        </div>
        `
        )
      $('.my-snackbars').delay(5000)
      $('.my-snackbars').first().hide( 2000, function() {
      $('.my-snackbars').first().remove();
    }) })

  $('#here-show').on('click', '.my-snackbars', function() {
   $(this).remove()
  });
  

  })
  
</script>
<button class="create">Click Me</button>
<div id="here-show">

</div>

https://jsfiddle.net/rpqxp77t/

Comments

[alex]

а они сейчас разве не по одному убираются?

[Шамуэй]

Alex: нет мне нужно чтобы сначала пропал, первый элемент полностью, потом второй потом третий и тд

Answer 1

[Евгений Куманин]

https://jsfiddle.net/jackkum/rpqxp77t/2/