淡入淡出文本，停在最后一个文本

Question

我对用于学校项目的 codepen 代码有疑问。

谁能帮帮我？

我有这段代码，我希望循环在最后一个引号（“第 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>