1

我想让一个框（#timeUnit）动画到 100px，然后回到 0px，然后是另一个 div（.fiveOne），我想让 nth-child(1) 消失。然后，框转到 100px 并返回，nth-child(2) 消失。连续5次。

在我下面的代码中，盒子动画到 100，回到 0，然后 nth-child(5) 消失，然后盒子动画到 100，回到 0，不再有 nth-child 盒子消失！就像 i 在运行之前评估为 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});
   });
 }
});
4

1 回答 1

0

你得到的效果是因为当内部函数运行时， 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)在循环中执行，依次捕获闭包中的每个值，并在第二个 chained 完成时最终执行时使返回的函数可以使用i正确的值。i.animate()

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

编辑：上面的代码已更正以适应@DavidThomas 的观点并使其更有效。

于 2012-10-21T12:04:49.280 回答