jquery - 带有动画/延迟的数组输出

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

现场演示