javascript - 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>