Fade in each li one by one

Question

I want to fade each nav li one by one. Here\'s my current code. It shows the whole div, now I want to fade in each li one by one with a slight dela

Answer 1

Do something like this with animation success callback

$(document).ready(function() {
  function fade(ele) {
    ele.fadeIn(500, function() { // set fade animation fothe emlement
      var nxt = ele.next(); // get sibling next to current eleemnt
      if (nxt.length) // if element exist
        fade(nxt); // call the function for the next element
    });
  }
  $("#circleMenuBtn").click(function() {
    fade($('#navbar li').eq(0)); // call the function with first element
  });
});

.sub-menu {
  left: 0;
  top: 0;
  position: relative;
  z-index: 1000;
  color: #000;
  right: 5px;
}
ul li {
  display: none;
}

  

    
First
    
Second
    
Third
    
Fourth
    
Fifth
  

click