jQuery淡入淡出效果不平滑？

我试图使用jQuery淡入数组中的一些文本，但我注意到效果并不总是平滑的——有时数组中的一个项目会比另一个项目停留更长时间，有时淡入会很快发生。它看起来好像有时挂着，但实际上页面上没有什么东西可以挂。我做错什么了吗

代码如下：

CSS:

脚本：

var arr = [ "one", "two", "three", "four", "five" ];

(function timer(counter) {
var text = arr[counter];

$('#target').fadeOut(function(){
    if(text === 'one') {
        $('#target').addClass("red");
    }
    else {
        $('#target').removeClass("red");
    }
    $('#target').empty().append(text).fadeIn();
});

delete arr[counter];
arr.push(text);

setTimeout(function() {
    timer(counter + 1);
}, 3000);
})(0);

和HTML：

<div id="target"></div>

jsfiddle：

---

注意：我在mac上的FF 12中看到了这个问题，safari似乎工作得很好。

我不是这方面的专家，但这是浏览器呈现文本的方式。我在Windows上看到Chrome

19.0.1084.52 m

中的某些字母出现了奇怪的淡入。一个选项是指定

fadeIn

时间。也许这会有帮助。在FF中似乎对我很好。您确定您的浏览器中没有其他网站或其他外部内容导致速度减慢吗？这里的淡入淡出时间/速度/持续时间似乎没有任何问题，但在淡入淡出之前和之后的一瞬间，文字似乎有点扭曲。

<div id="target"></div>