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!

Problem courtesy of: Sergey Dubovik

Solution

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>

Solution courtesy of: dfsq

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow .

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章