On my HTML page, I am looking to showcase text lines in succession with a delay. The unique condition is that when the second line appears, the color of the first line should change. Then, as the third line emerges, the color of the second line should also update.
Although I have integrated jquery.fadeInAmate.js for sequentially displaying the text lines with delays, there seems to be an issue with implementing the color change feature.
$(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>Looking forward to your help!