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

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 参数，该参数不会更新。

请注意，我在第一个 70*i 之前单独留下了 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');
          }
        });
    });
});

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

Do something after the last elemnt animation in an each function

javascript

each

jquery

animation