Question

我希望在每个函数的最后一个元素动画之后做一些事情。我试过下面的代码，但似乎没有用。

$(".menu").click(function() {
    var elems = $('.top-menu ul li'),
        i = 0;
    elems.each(function(i) {
        i += 1;
        $(this).delay(70*i).fadeIn(300);
        if(i == elems.length) {
          $('.bodyWrapper').addClass('noBodyScroll');
        }
    });
});

Answer 1

你相当接近，只需将移动到 fadeIn回调中，而不是自己管理i; jQuery已将其作为each回调的第一个参数提供：

$(".menu").click(function() {
    var elems = $('.top-menu ul li');
    elems.each(function(i) {
        $(this).delay(70*i).fadeIn(300, function() {       // ***
          if(i == elems.length - 1) {                      // *** note the - 1
            $('.bodyWrapper').addClass('noBodyScroll');
          }
        });
    });
});

这没有回调问题，因为对each回调的每次调用都会得到自己的i参数，而这个参数不会更新。< / p>

请注意，我在第一个i之前单独留下了70*i。如果第一个元素延迟70毫秒是非常重要的，那么您可能希望继续增加i（这只会发生一次）：

$(".menu").click(function() {
    var elems = $('.top-menu ul li');
    elems.each(function(i) {
        ++i;                                            // ***
        $(this).delay(70*i).fadeIn(300, function() {
          if(i == elems.length) {                       // *** note the - 1 is gone
            $('.bodyWrapper').addClass('noBodyScroll');
          }
        });
    });
});

在每个函数中的最后一个动画之后做一些事情

1 个答案: