jquery - jQuery选择器和setInterval

$('#start').click(function() {
  setInterval(fade, 1000);

  function fade() {
    $('.visible:first-child').removeClass('visible').addClass('invisible');
  };
});

.invisible {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <span class='visible'>Lorem ipsum dolor sit amet,</span>
  <span class='visible'> consectetur adipiscing elit.</span>
  <span class='visible'> Integer nec odio.</span>
</p>
<button id="start">start</button>

我希望<span>标记按顺序淡出。

为此，我设置了以1000 ms为间隔更改<span>标记类的脚本。

但是它只能工作一次。

我认为这是因为.visible:first-child从未更改。

https://jsfiddle.net/dewit/b9Lgdwaj/

最佳答案

尝试使用first代替first-child。

下面的工作片段。

$('#start').click(function(){
    setInterval(fade,1000);
    function fade(){
        $('.visible:first').removeClass('visible').addClass('invisible');
    };
});

.invisible {
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
    <span class='visible'>Lorem ipsum dolor sit amet,</span>
    <span class='visible'> consectetur adipiscing elit.</span>
    <span class='visible'> Integer nec odio.</span>
</p>

<button id="start">start</button>