setTimeout in jQuery.each not working

Question

I wanna imitate the menu item animation of this site

here's the key code I write to make the animation:

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

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

But it doesn't work, in this fiddle , the 4 items are being translated together, not "timeoutted" at all; strangely, in my actual site, the codes seem to be more broken, the class wasn't added at all. I inspected the code of my site and fiddle again, but I couldn't find where the problem is.

Answer 1

You can use the second parameter from the .each method to determine the element. Like:

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

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

Answer 2

You have to use this to target each elements individually,

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

DEMO

Or you can use arrow function to fix this,

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