jQuery FadeIn/FadeOut each element sequently

Question

i have quotes on my site that I want to show up one at a time

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

After page loads I want the first one to be visible and fade after, lets say, 2 seconds of delay, and next one appear right after, then second one fade out after delay and so on. I know how to do that with just CSS, but need something more efficient and the whole thing has to repeat infinitely. Thank you!

Answer 1

This is how you can cycle your quotes (adjust animation duration to your taste):

 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>