jquery - jQueryのフェード効果がスムーズではありませんか？

Question

jQueryを使用して配列内の一部のテキストをフェードトランジションしようとしていますが、効果が常にスムーズであるとは限らないことに気付きました。配列内の1つのアイテムが別のアイテムより長く残る場合もあれば、フェードが非常に速く発生する場合もあります。時々ぶら下がっているように見えますが、ページ上にぶら下がっているものはほとんどありません。私は何か間違ったことをしていますか？

コードはここにあります：

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で問題が発生していますが、サファリは正常に機能しているようです。