Отображать текстовые строки одну за другой с задержкой

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>