Затухание и выход текста, остановка на последнем тексте

Question

У меня вопрос по коду кодекса, который я использую для школьного проекта.

Кто-нибудь может мне помочь?

У меня есть этот код, и я хотел бы, чтобы l oop остановился на последней цитате ("6-ой цитате"). Как я могу изменить код для этого?

HTML

<div class="container">
  <h2 class="quotes">first quote</h2>
  <h2 class="quotes">second quote</h2>
  <h2 class="quotes">3rd quote</h2>
  <h2 class="quotes">4th quote</h2>
  <h2 class="quotes">5th quote</h2>
  <h2 class="quotes">6th quote</h2>
</div>

CSS

.quotes {display: none;}

JS

 (function() {

      var quotes = $(".quotes");
      var quoteIndex = -1;

      function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
          .fadeIn(2000)
          .delay(2000)
          .fadeOut(2000, showNextQuote);
      }

      showNextQuote();

    })();

Большое спасибо за помощь!

Answer 1

Проверьте текущее значение индекса в обратном вызове завершения анимации и рекурсивно вызовите функцию.

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    quotes.eq(++quoteIndex)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000,() => {  if(quoteIndex < 5) showNextQuote(); });
  }

  showNextQuote();

})();

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    quotes.eq(++quoteIndex)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, () => {
        if (quoteIndex < 5) showNextQuote();
      });
  }

  showNextQuote();

})();

.quotes {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h2 class="quotes">first quote</h2>
  <h2 class="quotes">second quote</h2>
  <h2 class="quotes">3rd quote</h2>
  <h2 class="quotes">4th quote</h2>
  <h2 class="quotes">5th quote</h2>
  <h2 class="quotes">6th quote</h2>
</div>

---

Если вы хотите, чтобы последний элемент отображался в конце, предоставьте обратный вызов после метода задержки, используя queue() метод.

(function () {
  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    quotes
      .eq(++quoteIndex)
      .fadeIn(2000)
      .delay(2000)
      .queue(function (next) {
        if (quoteIndex < 5) next();
      })
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();
})();

(function() {
  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    quotes
      .eq(++quoteIndex)
      .fadeIn(2000)
      .delay(2000)
      .queue(function(next) {
        if (quoteIndex < 5) next();
      })
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();
})();

.quotes {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h2 class="quotes">first quote</h2>
  <h2 class="quotes">second quote</h2>
  <h2 class="quotes">3rd quote</h2>
  <h2 class="quotes">4th quote</h2>
  <h2 class="quotes">5th quote</h2>
  <h2 class="quotes">6th quote</h2>
</div>