Tengo el siguiente código:
(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> ¿Cómo puedo modificar el JS para que una vez que el texto se alterne una vez , se detenga? Básicamente, quiero evitar que se alterne continuamente y quiero que se detenga cuando el texto básicamente llegue a World , ya que se completará el primer ciclo de texto alterno. ¿Cómo puedo modificar el JS para esto?
Ponga una condición límite para pasar a la siguiente iteración. En este caso, no es un bucle, por lo que no se necesita quoteIndex % quotes.length .
(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>Solo CSS:
#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>