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

Question

我有类似以下代码的东西：

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

我该如何做到在循环中的每次迭代都会等待 fadeIn(); 动画完成后才开始呢？

编辑--- 抱歉我的错误，我没有在循环中包含'i'。

- Matthew Dolman

---

你可以使用回调函数。 - ExpExc

Answer 1

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

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

http://jsfiddle.net/uq9mH/

- gilly3

---

谢谢，有几个类似的答案，但这是最简单的。正如你所说，使用for循环不适合这种情况（不使用延迟）。 - Matthew Dolman

Answer 2

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

无论如何，您需要将调用放在fadein方法的回调中：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);

- JohnP

Answer 3

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

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

但是你想做什么还不太清楚。你是要将同一个元素淡出10次吗？

- Jonas Høgh

---

抱歉造成困惑，我稍微调整了代码。问题在于for循环不等待回调函数，而是继续执行。使用这个片段，所有元素都会同时淡入，然后我会一次性收到10个警告框。 - Matthew Dolman

@matthew 抱歉，这不是针对十个元素的完整解决方案，只是回调语法的示例。我认为，被接受的答案中的递归解决方案是最优的。 - Jonas Høgh

Answer 4

试试这个：

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

您可以在延迟函数内更改时间持续时间。这里是 jsFiddle。

- HashimR

Answer 5

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

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

替代

  $(this).fadeIn();

- wargodz009