在每個函數中的最後一個元素動畫之後執行某些操作

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

不具有回調-IN-A-循環問題，因爲每次調用each回調都有自己的i的說法，這沒有按」 t得到更新。

請注意，我在第一個70*i之前單獨留下了i。如果它是重要的是第一要素得到那些70ms的延遲，你可能想繼續前進，增加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'); 
      } 
     }); 
    }); 
});