Question

在我的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>

预先感谢！

Answer 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>

延迟显示一个接一个的文本行

1 个答案: