jQuery.setTimeout.each不起作用

Question

我想模仿這個網站的菜單項動畫

這是我制作動畫的關鍵代碼：

li{transition:transform 600ms}
li.animated{transform:translateY(20px)}

/* Javascript */
  $('nav ul li').each(function(i){
    setTimeout(function(){
      $('ul li').addClass('animated');
    },400*i)
  })

但這是行不通的，在這個小提琴中 ，這四個項目正在一起翻譯，根本沒有“超時”； 奇怪的是，在我的實際站點中，代碼似乎更加混亂，根本沒有添加任何類。 我檢查了我的網站的代碼，然后再次撥弄，但我找不到問題所在。

Answer 1

您可以使用.each方法中的第二個參數來確定元素。 喜歡：

$('.inOrder').click(function(){
  $('ul li').each(function(i, ele){
    setTimeout(function(){
      $(ele).addClass('animated');
    },400*i);
  })
})

https://jsfiddle.net/2pgf76vx/2/

Answer 2

您必須使用this來分別定位每個元素，

  $('ul li').each(function(i){
    setTimeout(function(){
      $(this).addClass('animated');
    }.bind(this),400*i)
  });

演示

或者您可以使用箭頭功能來解決此問題，

  $('ul li').each(function(i){
    setTimeout(()=>{
      $(this).addClass('animated');
    },400*i)
  });