JQuery FadeIn/FadeOut каждый элемент вательно

Question

у меня есть цитаты на моем сайте, что я хочу, чтобы показать по одному

<div class="quotes"> 
    <p>Quote1</p> 
    <p>Quote2</p> 
    <p>Quote3</p> 
    <p>Quote4</p> 
</div> 

После загрузки страницы Я хочу первым, чтобы быть видимыми и исчезают после того, как, предположим, что , 2 секунды задержки, а следующий появляется сразу после, затем второй исчезает после задержки и так далее. Я знаю, как это сделать с помощью только CSS, но нужно что-то более эффективное, и все это нужно бесконечно повторять. Спасибо!

Answer 1

Это, как вы можете цикл ваши котировки (настроить длительность анимации на свой вкус):

var $quotes = $('.quotes p'), 
 
    index = 0; 
 

 
$quotes.eq(index++).fadeIn().delay(2000).fadeOut(function next() { 
 
    $quotes.eq(index++ % $quotes.length).fadeIn().delay(2000).fadeOut(next); 
 
});

.quotes p { 
 
    padding: 20px; 
 
    background-color: #C1C3D2; 
 
    display: none; 
 
}

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

 
<div class="quotes"> 
 
    <p>Quote1</p> 
 
    <p>Quote2</p> 
 
    <p>Quote3</p> 
 
    <p>Quote4</p> 
 
</div>