javascript - 我如何让 jQuery 在 .each() 循环完成之前将效果应用于每个项目？

Question

我有以下列表:

<div id="test">test</div>

<ul>
    <li>foo</li>
    <li>bar</li>
    <li>sta</li>
    <li>cko</li>
</ul>

和以下 jQuery 代码:

$(document).ready(function() {
    $('li').each(function(index) {
        $('#test').text($(this).text());
        $('#test').show("drop", { direction: "down" }, 500, function() {
            $("#test").delay(1000).hide("puff", {}, 100);
        });
    });  
 });

从逻辑上讲，这应该将 div test 的内容更改为 foo，应用 drop and puff 效果，将内容更改为 bar，应用效果，等等。但是当您运行它时，整个 .each 循环会在效果开始之前结束，因此最后一个元素 cko 会首先出现并进行 4 次动画处理。

我怎样才能让每一项都得到效果，然后继续进行下一项？

Answer 1

如果您希望它按队列的顺序发生，您还需要在队列中添加第一个函数(使用 .queue() )，如下所示:

$(function() {
    $('li').each(function(index) {
        var li = $(this);
        $('#test').queue(function(n) {
            $(this).text(li.text());            //set the text
            n();                                //call next function in the queue
        }).show("drop", { direction: "down" }, 500, function() {
            $(this).delay(1000).hide("puff", {}, 100);
        });
    });  
 });​

You can give it a try here .这会将文本设置排队与动画顺序发生，这似乎是您所追求的。调用传递给您的队列回调的函数很重要，因为它会推进队列，在这种情况下触发后面的动画。

.delay()也会以您的方式产生奇怪的效果，如果您希望它在队列中，请这样做:

$(function() {
    $('li').each(function(index) {
        var li = $(this);
        $('#test').queue(function(n) {
            $(this).text(li.text());
            n();
        }).show("drop", { direction: "down" }, 500)
          .delay(1000).hide("puff", {}, 100);
    });  
 });​

You can try it here ，这实际上会在继续之前为每个元素暂停一秒钟。