селектор JQuery и setInterval

Question

$('#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> теги затухать в последовательности.

Для этого я устанавливаю скрипт, который меняет класс меток <span> с интервалом в 1000 мс.

Но он работает только один раз.

Я думаю, это потому, что .visible:first-child никогда не менялся.

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

Answer 1

попробовать 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>

Answer 2

": первый-ребенок" всегда означает, что первый ребенок узла, не включая селекторов. Поэтому, когда вы запрашиваете «.visible: first-child», вы не получите никаких результатов, если первый ребенок не является «.visible». Для этого вам нужно изменить свой запрос на аккаунт.

Answer 3

селектор first-child выбирает все элементы, которые являются первым дочерним элементом их родителя. Вот почему ваш единственный первый элемент был невидим. Вы можете использовать $ ('. Visible: first') для этого.