jquery多个元素进入和退出周期

Question

你好，我用IDs创建了3个元素(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>

​