javascript - 一次为一个段落制作动画

Question

我有一个 div，里面有几个段落。我希望这些段落中的每一个都一个接一个地淡入。我可以用下面的代码来做到这一点。然而，由于我将有更多的 div 和许多其他段落，每个段落都有其独特的类名，我想知道是否有一种更简单的方法来实现这一点，而无需不断复制粘贴代码，每次都更改类名。

$('.line1').css('visibility','visible').hide().fadeIn(1000, function(){
  $('.line2').css('visibility','visible').hide().fadeIn(1000, function(){
    $('.line3').css('visibility','visible').hide().fadeIn(1000, function(){
      $('.line4').css('visibility','visible').hide().fadeIn(1000);
    });
  });
});

.line1, .line2, .line3, .line4 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <p class="line1">Text 01</p>
  <p class="line2">Text 02</p>
  <p class="line3">Text 03</p>
  <p class="line4">Text 04</p>
</div>

Answer 1

类名在这里并不重要，你可以使用.line或.line{i}或其他任何东西，只要有一个简单的方法可以选择所有这些。

如果您想要不同的类名，可以在代码中使用 .div1 > p 代替 .line。

如果轻微(+/-几毫秒)的错误不是问题，您可以使用 setTimeout 来实现此目的。

$(".line").each(function (i) {
  $(this).css("opacity", 0);
  
  setTimeout(() => {
    $(this).animate({ opacity: 1 }, 1000);
  }, 1000 * i);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <p class="line">Text 01</p>
  <p class="line">Text 02</p>
  <p class="line">Text 03</p>
  <p class="line">Text 04</p>
</div>

您还可以使用.delay代替setTimeout。

$(".line").each(function (i) {
  $(this).css("opacity", 0).delay(1000 * i).animate({ opacity: 1 }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <p class="line">Text 01</p>
  <p class="line">Text 02</p>
  <p class="line">Text 03</p>
  <p class="line">Text 04</p>
</div>