jquery - アニメーション/遅延のある配列からの出力

Question

配列を期待する関数があります。この配列は、ループ内で (アニメーション付きで) 印刷されます。各値は、下の div に一度適用されます。最初は空です。次に、配列の最初の値がフェードインし、数秒間表示され、最後にフェードアウトします。配列内のすべての値は、このように扱われます。そして、div は一度に 1 つの値を表示するだけです。

<div id="text_wrapper"></div>

関数：

function runAni(arr){
    $.each(arr, function(key, value) { 
        //alert(key + ': ' + value); 
    });
}

すでにキューを試しましたが、失敗しました。助けてください ：）

Answer 1

function runAni(arr) {
    var $div = $('#text_wrapper');

    $.each(arr, function(index, value) {
        setTimeout(function() {
            $div.html(value).fadeIn().fadeOut();
        }, 1000 * index);
    });
}

var arr = ["foo", "more foo", "Even more of that"];
runAni(arr);​

ライブデモ