具有动画/延迟的数组输出

Question

我有一个需要数组的函数。该数组应在循环内打印出来（带动画）。每个值都会被应用到下面的div。首先它是空的。然后，数组中的第一个值淡入，显示几秒钟，最后淡出。数组中的所有值都应该像这样处理。 div只能一次显示一个值。

<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);​

Live DEMO