Modifying JS to stop animation - HTML/CSS/JS-CodePudding

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 >
  <h1> There </h1>
</div>
<div >
  <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?

CodePudding user response：

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 >
  <h1> There </h1>
</div>
<div >
  <h1> World </h1>
</div>

CodePudding user response：

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>