jQuery FadeIn / FadeOut每个元素都是后续的

Question

我的网站上有引号，我想一次显示一个

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

页面加载后我希望第一个可见并淡出，比如说延迟2秒，然后下一个出现在延迟之后，然后第二个在延迟后逐渐消失，依此类推。 我知道如何用CSS做到这一点，但需要更高效的东西，整个事情必须无限重复。 谢谢！

Answer 1

这是你如何循环你的报价（根据你的喜好调整动画持续时间）：

＆＃13;

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;