jquery - jQuery淡入淡出效果不流畅？

Question

我正在尝试使用 jQuery 淡化数组中的一些文本，但我注意到效果并不总是平滑 - 有时数组中的一个项目会比另一个项目停留的时间更长，有时淡化会很快发生。似乎它有时会挂起，但页面上几乎没有任何东西可以挂起它。难道我做错了什么？

代码在这里：

CSS：

div { color:blue; font-size:6em }
.red { color:red; }

脚本：

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：http: //jsfiddle.net/58Jv5/4/

注意：我在 Mac 上看到 FF 12 中的问题，Safari 似乎工作正常。