等待 jQuery 动画在 for 循环中完成答案

【问题标题】：Wait for a jQueryanimation to complete within for loop等待 jQuery 动画在 for 循环中完成
【发布时间】：2011-11-24 04:20:03
【问题描述】：

我有类似下面的代码

for(i=0, j=10; i<j ; i++){
    $('#an-element-'+i).fadeIn();
}

如何使循环中的每次迭代仅在fadeIn(); 开始一次动画完成了吗？

编辑---对不起，我没有在循环中包含“i”

【问题讨论】：

你可以使用callback

标签： jquery animation loops

【解决方案1】：

for 循环是同步的，但动画是异步的。您需要使用递归。

var i = 0, j = 10;
(function fadeNext () {
    if (i < j) {
        $('#an-element-' + i++).fadeIn(fadeNext);
    }
}) ();

http://jsfiddle.net/uq9mH/

【讨论】：

谢谢，有一些类似的答案，但这是最简单的。正如你所说的 for 循环不适合这个（不使用延迟）

【解决方案2】：

根据您的代码，您的循环只会在同一个元素中淡入 10 次。

无论如何，你需要把调用放在淡入方法的回调中：http://api.jquery.com/fadeIn/

这样的东西应该可以工作（未经测试）

var counter = 10;
function fadeIn(elem) {
   $(elem).fadeIn('slow', function(){
       if (counter > 0) {
          fadeIn(elem); //up to you how you figure out which element to fade in
       }
   });
   counter--;
}

//var elem = $('.something');
fadeIn(elem);

【讨论】：

【解决方案3】：

您可以通过将动画放在作为回调参数传递的函数中来执行动画之后的代码：

$("#foo").fadeIn("slow",function () {
  alert("done");
});

但目前尚不清楚您要做什么。你是在淡化同一个元素 10 次吗？

【讨论】：

对不起，我稍微调整了代码。问题是 for 循环不会等待回调，而是继续执行。使用这个 sn-p 所有元素同时淡入，然后我一次得到 10 个警报框。
@matthew 抱歉，这并不是针对十个元素的完整解决方案，只是回调语法的一个示例。接受答案中的递归解决方案是最佳 AFAIK

【解决方案4】：

试试这个：

for (i = 0, j = 10; i < j; i++) {
    $('.try').each(function() {
        $(this).delay(1000).fadeOut().delay(1000).fadeIn();
    });
}

您可以在延迟函数中更改持续时间。 Here is the jsFiddle.

【讨论】：

【解决方案5】：

如果您对所有项目都有固定延迟，则可以使用这行代码：

 $(this).fadeIn().delay(2000).fadeOut();

而不是

  $(this).fadeIn();

【讨论】：