jQuery every : loop an array, 通过 jQuery 附加文本并执行动画

Question

我有一个像这样的数组:

var txt = new Array('1st', '2nd', '3rd');

我需要将此数组放入循环中，将每个文本应用到(公共(public))div，用动画显示它，然后用另一个动画隐藏它。

我所做的是，首先添加一个 html div:

<div id="contentHolder"></div>

然后在我的 jQuery 代码中，我写道:

$.each(txt, function(index, value)) {
    $("#contentHolder").empty().append(value).slideDown('slow').fadeOut('slow');
}

我得到的是contentHolder div充满了“3rd”并且它出现并消失了三次!看起来文本正在循环中应用，完成后，动画队列正在运行。

这是它的代码:http://jsfiddle.net/fbgp2000/97ThY/2/

我需要的是相同的，但在每个循环中显示不同的文本。

有人可以告诉我我错过了什么吗？

Answer 1

在此上下文中，您必须使用递归和回调，因为 .animate() 是异步。

试试这个，

var txt = new Array("1st", "2nd", "3rd");
var xCnt = -1;

function AnimateOneByOne()
{
    xCnt += 1; 

    if( xCnt < txt.length){

       $("#contentHolder")
      .empty()
      .append(txt[xCnt])
      .slideDown('slow')
      .fadeOut('slow', AnimateOneByOne);

    }

}

AnimateOneByOne();

DEMO