javascript - 使用 jquery 为多个元素制作交错的淡入淡出循环

Question

我正在尝试使用 jquery 为多个元素制作淡入淡出动画。很难解释，所以我先放上相关代码。

$(document).ready(function() {
      $("#1").delay(0).animate({
        'opacity': '1'
      }, 1000);
      $("#2").delay(1000).animate({
        'opacity': '1'
      }, 1000);
      $("#3").delay(2000).animate({
        'opacity': '1'
      }, 1000);
      $("#4").delay(3000).animate({
        'opacity': '1'
      }, 1000);
    });

.hideme {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="1" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
  <div id="2" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
  <div id="3" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
  <div id="4" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
</div>

这段代码目前所做的是让容器中的四个父 div 逐一淡入。之后，我想要的是，所有具有“第一”类的 div 同时淡出，然后每个“第一”div 一个接一个地淡入(就像所有父 div 在加载时所做的那样，但是只有“第一个”div)，让 div 再次同时淡出，并无限期地循环。这意味着“第一个”div 将淡入和淡出，但“第二个”div 将在第一次淡入后持续显示在屏幕上。请记住，“第一个”div 不应同时淡入，而应一个接一个淡入。我无法弄清楚如何编写这段代码。

Answer 1

你不需要 jQuery 来做类似的事情，可以用 CSS 来完成。"first"和 "second"必须是类，而不是 id，因为 id 必须是唯一的。

.second {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}

.first {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="container">
  <div id="1" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
  <div id="2" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
  <div id="3" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
  <div id="4" class="hideme">
    <div class="first">A</div>
    <div class="second">B</div>
  </div>
</div>