jQuery each：循环数组，附加文本并通过 jQuery 做动画答案

【问题标题】：jQuery each: loop an array, append texts and do animations by jQueryjQuery each：循环数组，附加文本并通过 jQuery 做动画
【发布时间】：2013-12-25 12:24:19
【问题描述】：

我有一个类似的数组：

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

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

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

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

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

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

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

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

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

谁能告诉我我错过了什么？

【问题讨论】：

标签： jquery arrays animation queue each

【解决方案1】：

您必须在这种情况下使用recurion and call backs，因为.animate() 是asynchronous。

试试这个，

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

【讨论】：

仅供参考，.fadeOut('slow',function(){ AnimateOneByOne() }); 可以缩短为：.fadeOut('slow',AnimateOneByOne); 在这种情况下，无需使用匿名函数传递。
@BlueSkies 感谢您的宝贵时间。相应更新。

【解决方案2】：

你应该在这里使用回调函数，当动画完成时调用它，你的循环运行速度比动画快得多：

var $contentHolder = $('#contentHolder');
(function worm(i) {
    $contentHolder.fadeOut(function() {
        $(this).text( txt[i] ).slideDown(function() {
            txt.length !== ++i ? worm(i) : '_the end';
        });
    }); 
})(0);

http://jsfiddle.net/WW3cH/

重启：

worm( txt.length !== ++i ? i : 0 );

http://jsfiddle.net/W4fm9/

【讨论】：

这是什么技术。？ (function(){})(0) 古玩学习。你能把我链接到一些相关的资源吗？
@RajaprabhuAravindasamy 立即调用函数表达式，这应该会有所帮助benalman.com/news/2010/11/…

【解决方案3】：

一个相当简单的解决方案

var txt = new Array('1st', '2nd', '3rd'),
    item = 0,
    t = setInterval(function(){

    $("#contentHolder").html(txt[item]).slideDown(1000).fadeOut(1000);
    item++;
    if(item>txt.length){
        clearInterval(t);
        item = 0; // for further use;
    }
}, 2000);

【讨论】：

您可能需要在 if 语句中使用 >=