FadeIn/Out Text

HTML

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
<h2 class="quotes">third quote</h2>
<input id="prev" type="button" value="Prev" />
<input id="next" type="button" value="Next" />

CSS

.quotes {display: none;}

JavaScript

$(function()
{
    var quotes = $(".quotes");
    var quoteIndex = -1;
    
    function showQuote(change)
    {
        quoteIndex += change;
        if (quoteIndex < 0)
        {
            quoteIndex += quotes.length;
        }
        else if (quoteIndex >= quotes.length)
        {
            quoteIndex -= quotes.length;
        }
       quotes.stop(true, true).hide().eq(quoteIndex)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000)
            .queue(function() { showQuote(1); });
    }  
    showQuote(1);
    
    $('#prev').on('click', function()
    {
        showQuote(-1);
    });
    
    $('#next').on('click', function()
    {
        showQuote(1);
    });
});