延迟显示文本行答案

【问题标题】：Display text line one after another with delay延迟显示文本行
【发布时间】：2019-10-26 18:58:53
【问题描述】：

在我的 HTML 页面中，我们需要延迟显示一行一行的文本。但条件是当第二行显示时，第一行应该改变颜色。然后当第三行显示时，第二行应该改变颜色。

我使用过 jquery.fadeInAmate.js 并且我们可以实现在一定的延迟下一个接一个地显示文本行。但是因为颜色变化并没有发生。

$(function() {
  setInterval(function() {
    $("#slideShow").show();
    $(".fadeInAmate").fadeInAmate({
      initialDelay: 250,
      fadeInSpeed: 2000,
      animationDelay: 5000
    });
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://jforaker.github.io/jQuery-FadeInAmate/src/jquery.fadeInAmate.js"></script>
<div id="slideShow">
  <p class="fadeInAmate">This is my first line</p>
  <p class="fadeInAmate">Here goes my second line</p>
  <p class="fadeInAmate">Then comes third line</p>
  <p class="fadeInAmate">Following to that fourth line</p>
  <p class="fadeInAmate">And finally here goes my fifth line</p>
</div>

提前致谢！

【问题讨论】：

你想在哪里改变颜色？
看起来你使用的插件没有暴露任何事件（source），所以你不能轻易知道元素什么时候开始淡入以改变以前的颜色那些。我建议您编写自己的逻辑，或使用不同的库
它是用不同的脚本编写的。你可以在“jquery.fadeInAmate.js”中看到

标签： jquery html css jquery-plugins

【解决方案1】：

您使用的插件似乎没有公开任何事件 (source)，因此您无法轻易知道元素何时开始淡入以更改先前元素的颜色。我建议使用不同的库，或者编写自己的逻辑，如下所示：

$("#slideShow .fadeInAmate").each(function(i) {
  $(this).delay(3000 * i).fadeIn(2000, function() {
    $(this).prev().addClass('foo');
  });
});

#slideShow p {
  display: none;
}

.foo {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://jforaker.github.io/jQuery-FadeInAmate/src/jquery.fadeInAmate.js"></script>
<div id="slideShow">
  <p class="fadeInAmate">This is my first line</p>
  <p class="fadeInAmate">Here goes my second line</p>
  <p class="fadeInAmate">Then comes third line</p>
  <p class="fadeInAmate">Following to that fourth line</p>
  <p class="fadeInAmate">And finally here goes my fifth line</p>
</div>

【讨论】：