制作jQuery文本滑块

所以基本上我有多个名为quote的div类，其中包含一个文本和一个blockquote。如何使其每5秒淡入下一个quote类

以下是标记的外观：

<div id="quoteWrapper">
<div class="quote">

    <blockquote>Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Second Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Third Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>
</div>

引述如下
作者

第二句话在这里
作者

第三句话在这里
作者

还有一个类似的问题。我要做的是创建一个使用jquery淡出当前报价并在回调的下一个报价中淡出的间隔。您可以通过添加一个类来确定当前显示的报价

<div class="quote visible">

    <blockquote>Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Second Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

setInterval(showQuote, 5000);

...

function showQuote() {
    // get visible quote
    $('.quote.visible').fadeOut(function() {
        // remove visible class from old quote and add it to new
        // get next quote and fadeIn() when fadeout finishes
    });
}