文本随Jquery淡出

Question

我不明白为什么这不起作用？我只是想让引号淡出和退出这一点，但什么都没有出现？我把脚本放在</body>之前的底部。我在这里做错了什么？

HTML

<div class="quoteContainer">
<span class="quotes">first quote</span>
<span class="quotes">second quote</span>
</div>

CSS

.quoteContainer {
    height: 150px;
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    color: #444444;
    vertical-align:middle;
    text-align:center;
}

.quotes {display: none;}​

Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(1000)
            .delay(2000)
            .fadeOut(1000, showNextQuote);
    }

    showNextQuote();

})();​
</script>