CODEWITHSUNDEEP
javascriptjquerycss
Sergey Dubovik
Sergey Dubovik

Reputation: 165

jQuery FadeIn/FadeOut each element sequently

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!

Upvotes: 0

Views: 596

Answers (1)

dfsq
dfsq

Reputation: 193261

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>

Upvotes: 2

Related Questions