为什么setInterval在一段时间后无法正常工作

我编写了一个javascript代码，每10秒向用户显示一个随机报价。我使用jquery来更新div，并使用setInterval来重复该操作。我正在从javascript数组中获取一个随机引号。

但当我测试它时，它似乎在一段时间后（比如3-5分钟）无法正常工作，我有一些jquery效果，比如fadeIn和fadeOut，但它们是在引号更改之前执行的。这是js代码；

var quotes = [
    "Some String",
    "Some String",
    "Some String"
];
$(function() {
    var $rand = $('div#randomQuote > p');
    var random_quote = quotes[Math.floor(Math.random() * quotes.length)];     
    $rand.html(random_quote);
    $rand.animate( {"opacity" : 0}, 0);
    $rand.animate( {"opacity" : 1}, 500);
    $rand.delay("9000");
    $rand.animate( { "opacity" : 0 }, 500 );    
});

function randomQuote () {
    var $rand = $('div#randomQuote > p');
    var random_quote = quotes[Math.floor(Math.random() * quotes.length)]; 
    $rand.html(random_quote);
    $rand.animate( {"opacity" : 1}, 500 );
    $rand.delay("9000");
    $rand.animate ( {"opacity" : 0}, 500 );
}
$(function () {
    setInterval(randomQuote, 10000);
});

虽然我不确定，但我想，这些线需要一些时间来计算，它打破了循环。

var $rand = $('div#randomQuote > p');
var random_quote = quotes[Math.floor(Math.random() * quotes.length)]; 

Q:如何改进此代码以使其按预期工作？

提前谢谢。