I have the following code:
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();.quotes {
display : none;
margin : 0;
padding : 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Hello </h1>
<div class="quotes">
<h1> There </h1>
</div>
<div class="quotes">
<h1> World </h1>
</div>How can I modify the JS so that once the text alternates once, it stops. I basically want to stop it from continuously alternating and want it to stop when the text basically reaches World since the first cycle of alternating text will be completed. How can I modify the JS for this?
Put a limit condition to go to the next iteration. In this case, is not a loop, so quoteIndex % quotes.length is not needed.
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
var q=quotes.eq(quoteIndex)
.fadeIn(2000)
if (quoteIndex < quotes.length-1)
q.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();.quotes {
display : none;
margin : 0;
padding : 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Hello </h1>
<div class="quotes">
<h1> There </h1>
</div>
<div class="quotes">
<h1> World </h1>
</div>CSS only :
#quotes > h1:nth-of-type(1) {
opacity : 0;
animation-delay : .5s;
animation-duration : 4s;
animation-fill-mode : forwards;
animation-name : show2Hide2;
}
#quotes > h1:nth-of-type(2) {
opacity : 0;
height : 0;
margin : 0;
animation-delay : 4.5s;
animation-duration : 2s;
animation-fill-mode : forwards;
animation-name : wait4show2;
}
@keyframes show2Hide2 {
0% { opacity : 0; }
50% { opacity : 1; }
99% { opacity : 0; }
100% { height : 0; margin: 0; }
}
@keyframes wait4show2 {
0% { height : auto; margin: auto; opacity : 0; }
100% { opacity : 1; }
}<h1> Hello </h1>
<div id="quotes">
<h1> There </h1>
<h1> World </h1>
</div>