JQuery延迟地从项目列表中逐一删除类

【问题标题】：JQuery remove class from list of items one by one with a delayJQuery延迟地从项目列表中逐一删除类
【发布时间】：2020-04-25 12:40:01
【问题描述】：

我有一个名为 .item 的 div 列表，我想一次将它们淡入一个，每个显示之间有 100 毫秒的延迟。我正在使用顺风，所以我想通过删除 .opacity-0 类来与我的其余动画联系起来。但是他们总是同时删除 opacity-0 类，我在 jquery 中尝试了一个 .each() 选择器，但它没有用。

这是迄今为止我所拥有的一个准系统 JS Fiddle。 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);

    })

谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案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>

【讨论】：