jquery多元素淡入淡出循環

Question

您好，我創建了 3 個帶有 ID 的元素（rt-1、rt-2、rt-3）

<div class="body-wd06as">
<p>Free<span id="rt-1" style="color: #FE2C55;">views</span>
<span id="rt-2" style="color: #FE2C55;">followers</span>
<span id="rt-3" style="color: #FE2C55;">likes</span>
</p>
</div>

我想讓它不斷使一個元素淡出，另一個元素淡入（rt-1 元素淡入淡出，rt-2 元素淡入淡出，rt-3 元素淡入淡出退出然后 rt-1 元素再次淡入......&循環繼續。）

我最初使這 3 個元素在 css 中不可見：

#rt-1{
  display: none;
}

#rt-2{
  display: none;
}

#rt-3{
  display: none;
}

jQuery代碼：

  $(function ()
  {
      var $element1 = $('#rt-1');
      var $element2 = $('#rt-2');
      var $element3 = $('#rt-3');
      setInterval(function () {
          $element1.fadeOut(1000);
          $element2.fadeIn(1000);
          $element2.fadeOut(1000);
          $element3.fadeIn(1000);
          $element3.fadeOut(1000);
          $element1.fadeIn(1000);

      }, 0);
  });

但它沒有按預期工作

Answer 1

您根本不需要setInterval 。
根據文檔fadeIn()和fadeOut()將函數作為第二個參數，您可以在其中調用另一個步驟。

例如：

 $(() => { const $element1 = $('#rt-1'); const $element2 = $('#rt-2'); const $element3 = $('#rt-3'); let step = -1; const fadeAnimate = () => { step = (step >= 5) ? 0 : (step + 1); switch (step) { case 0: $element1.fadeIn(1000, fadeAnimate); break; case 1: $element1.fadeOut(1000, fadeAnimate); break; case 2: $element2.fadeIn(1000, fadeAnimate); break; case 3: $element2.fadeOut(1000, fadeAnimate); break; case 4: $element3.fadeIn(1000, fadeAnimate); break; case 5: $element3.fadeOut(1000, fadeAnimate); break; } }; fadeAnimate(); });

 .rt { display: none; color: #FE2C55; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body-wd06as"> <p> Free <span id="rt-1" class="rt">views</span> <span id="rt-2" class="rt">followers</span> <span id="rt-3" class="rt">likes</span> </p> </div>