Question

我有类似下面的代码

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

如何使循环中的每次迭代只在fadeIn（）;动画已经完成了？

编辑---对不起我坏了我没有在循环中包含'i'

Answer 1

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

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

http://jsfiddle.net/uq9mH/

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

Answer 3

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

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

但目前还不清楚你要做什么。你褪色相同的元素10次了吗？

Answer 4

试试这个：

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

您可以更改延迟功能内的持续时间。 Here is the jsFiddle.

Answer 5

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

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

而不是

  $(this).fadeIn();

等待for循环中的jQueryanimation完成

5 个答案: