一次动画一个段落

Question

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

$('.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

Class 名称在这里无关紧要，您可以使用 .line 或 .line{i} 或其他任何名称，只要有一种简单的方法即可 select 所有其中

如果您想要不同的 class 名称，您可以在代码中使用 .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>

Answer 2

您可以使用 delay 来延迟后续的 fadeIn，如下所示：

for (var n = 1; n <= 4; ++n) {
    $(".line" + n).css('visibility','visible').hide().delay(1000 * (n - 1)).fadeIn(1000);
}

实例：

for (var n = 1; n <= 4; ++n) {
    $(".line" + n).css('visibility','visible').hide().delay(1000 * (n - 1)).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>

或任何 class 姓名列表：

["line1", "line2", "line3", "line4"].forEach(function(cls, index) {
    $("." + cls).css('visibility','visible').hide().delay(1000 * index).fadeIn(1000);
});

实例：

["line1", "line2", "line3", "line4"].forEach(function(cls, index) {
    $("." + cls).css('visibility','visible').hide().delay(1000 * index).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>

一次动画一个段落

Animate one paragraph at a time

javascript

jquery

fadein