Javascript 如何让jQuery在.each（）循环中的每个项完成之前应用效果？

我有以下清单：

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

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

从逻辑上讲，这应该将div

test

的内容更改为

foo

，应用拖放效果，将内容更改为

bar

，应用效果，依此类推。但是当您运行它时，整个.each循环在效果开始之前结束，因此最后一个元素

cko

首先显示，并设置了4次动画

---

如何使每个项目都达到效果，然后再转到下一个项目？

如果希望按照队列的顺序进行，您还需要在队列上添加第一个函数（使用），如下所示：

$(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);
        });
    });  
 });​

$(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);
    });  
 });​

。这会将文本设置与动画按顺序排列，这似乎就是您所追求的。调用传递给队列回调的函数很重要，因为这是推进队列的原因，在本例中会触发后面的动画

如果您想让它出现在队列中，请按如下方式操作：

$(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);
        });
    });  
 });​

$(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);
    });  
 });​

---

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

未测试，但我认为您可以尝试：

$(document).ready(function() {
    animateItem($('li'), 0);
});

function animateItem(li, i) {
    if (li.length > i) {
        $('#test').text(li.eq(i).text());
        $('#test').show("drop", { direction: "down" }, 500, function() {
            $("#test").delay(1000).hide("puff", {}, 100, function() { 
                animateItem(li, i++);
            });
        });
    }
 }

---

这几乎可以正常工作，但我需要puff动画立即跟随drop动画。现在，所有的物品一个接一个地滑起来，最后一起被吹出来。让我们在你提供的链接上修改它。。。