延迟显示文本行

Posted 2023-05-09

【中文标题】延迟显示文本行

【英文标题】：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”中看到

【参考方案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>