Question

我想动画一个框（#timeUnit）转到100px，然后回到0px，然后再回到另一个div（.fiveOne），我希望nth-child（1）消失。然后，框变为100px并返回，nth-child（2）消失。等等5次。

在我的下面的代码中，框动画为100，回到0，然后第n个孩子（5）消失，然后框动画为100，回到0，并且没有更多的第n个子框消失！这就像我在运行之前评估为5。

$(function() {
 for (var i=0; i<5; i++) {
   $("#timeUnit").animate({width:100px},1000).animate({width:0},0,function(){
    $('.fiveOne .five:nth-child(' + i + ')').css({opacity:0});
   });
 }
});

Answer 1

你得到的效果是因为在内部函数运行的时候，for循环已经完成并且i == 5。

这样做的方法是在闭包中捕获i的每个值，如下所示：

$(function() {
    var $fiveKids = $('.fiveOne .five').children();
    function makeClosure(i) {
        return function() {
            $fiveKids.eq(i).css({opacity:0});
        }
    }
    for (var i=0; i<$fiveKids.length; i++) {
        $("#timeUnit").animate({'width':'100px'},1000).animate({width:0},0, makeClosure(i));
    }
});

注意：

makeClosure()是一个返回函数的函数，这个函数有点令人费解但在函数是可以传递的第一类对象的语言中非常正常。
该过程效率低，因为在循环中重复$("#timeUnit").animate({'width':'100px'},1000)会引入延迟。就个人而言，我会完全采用不同的方法，但为了清晰起见，这个版本在这方面一直与原文保持接近。

表达式makeClosure(i)在循环中执行，在闭包中依次捕获i的每个值，并在返回的函数最终执行时使i的正确值可用完成第二个链式.animate()。

我认为这会产生你想要的效果。

编辑：上面的代码经过修正，以适应@DavidThomas的观点并提高效率。

我如何逐个循环并为nth-child制作动画？

1 个答案: