製作一個jQuery文本滑塊

Question

所以基本上我有多個div類叫quote，包含一個文本和一個blockquote。我該如何讓它褪色到下一個報價類每5秒？

這裏的標記是什麼樣子：

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

Answer 1

有一個類似的問題here。我會做的是創建一個間隔，使用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 
    }); 
} 

做到這一點