JQuery удалить класс из списка элементов один за другим с задержкой

Question

У меня есть список div, называемый .item, и я хочу постепенно уменьшать их по одному с задержкой в ​​100 мс между каждым показом. Я использую попутный ветер, поэтому я хочу сделать это, удалив класс .opacity-0 до t ie с остальными моими анимациями. Однако они всегда удаляют класс opacity-0 в одно и то же время, и я пробовал селектор .each () в jquery, но он не работал.

Вот скелет JS Скрипка того, что я так далеко https://jsfiddle.net/oxv785k9/

HTML:

<div class="content">
  <div class="item opacity-0">
    <h4>Header</h4>
    <p>This is the content</p>
  </div>
  <div class="item opacity-0">
    <h4>Header</h4>
    <p>This is the content</p>
  </div>
</div>

JS:

$(document)
    .ready(function () {

        setInterval(function () {

        $('.item').delay(1000).removeClass("opacity-0")

        }, 500);

    })

Спасибо!

Answer 1

Используйте setTimeout вместе с .each. Поскольку вы хотите добавить задержку, вам нужно изменить timming. Таким образом, вы можете использовать i для .each, так как это будет меняться каждый раз и умножать это на константу

$(document)
  .ready(function() {
    $('.item').each(function(i, v) {
      setTimeout(function() {
        $(v).removeClass("opacity-0")
      }, i * 2000)
    })



  })

.opacity-0 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="item opacity-0">
    <h4>Header</h4>
    <p>This is the content</p>
  </div>
  <div class="item opacity-0">
    <h4>Header</h4>
    <p>This is the content</p>
  </div>
</div>