jQuery each:循环一个数组，追加文本，用jQuery做动画

I have an array like:

我有一个数组:

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

I need to put this array into a loop, apply each text to a (common) div, show it with an animation, then hide it with another animation.

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

What I have done is, first added an html div:

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

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

Then in my jQuery code, I wrote:

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

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

What I get is that the contentHolder div is filled with the "3rd" and it appears and disappears for three times! It looks like the text is being applied in the loop and when it's done, the queue of animations is being run.

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

Here is its code: http://jsfiddle.net/fbgp2000/97ThY/2/

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

What I need is the same but showing different texts in each loop.

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

Could anyone please tell me what I'm missing?

谁能告诉我我遗漏了什么吗?

3 个解决方案

#1

You should use callback function here, which is called when the animation is complete, your loop runs much faster than the animations:

您应该在这里使用回调函数，当动画完成时调用回调函数，您的循环比动画快得多:

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/

http://jsfiddle.net/WW3cH/

For restarting:

重启:

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

蜗杆(txt。长度! = = + +吗?我:0);

http://jsfiddle.net/W4fm9/

http://jsfiddle.net/W4fm9/

#2

You have to use recurion and call backs in this context, since .animate() is asynchronous.

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

Try this,

试试这个,

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

#3

A rather simple solution

一个非常简单的解决方案

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