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 delay.

$(document).ready(function(){     $("#circleMenuBtn").click(function(){         $("#dropDownMenu").fadeIn(500);     }); }); 

<div class="sub-menu" id="dropDownMenu">     <ul id="navbar">         <li> First</li>         <li>Second</li>         <li>Third</li>         <li>Fourth</li>         <li>Fifth</li>     </ul> </div> 

.sub-menu {     position: absolute;     z-index: 1000;     color: #fff;     right: 5px;     display: none; } 

I tried for loops trying to fade in each li in one iteration but no success. Please share your ideas.

UPDATE: Rory McCrossan's code is perfect. Unfortunately, it's not compatible with my code that hides the menu when clicked outside it.

$(document).mouseup(function (e) {     var container = $("#dropDownMenu");      if (!container.is(e.target)        && container.has(e.target).length === 0) {        container.fadeOut(500);     } }); 

What went wrong? I've just started to learn JS and JQuery so please forgive me if it's a lame question.

Answer 1

You can use an each() call to loop through the li elements and delay() the fadeIn() animation by an incremental amount. Try this:

$("#dropDownMenu li").each(function(i) {      $(this).delay(100 * i).fadeIn(500);  });

.sub-menu {      position: absolute;      z-index: 1000;      /* color: #fff;      right: 5px; */  }    .sub-menu li {      display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="sub-menu" id="dropDownMenu">      <ul id="navbar">          <li> First</li>          <li>Second</li>          <li>Third</li>          <li>Fourth</li>          <li>Fifth</li>      </ul>  </div>

If you want to increase/decrease the interval between items fading, change the value provided to the delay() method. In this example I used 100ms.

Answer 2

If you have a limited number of elements you could also consider using css-animations instead of a javascript solution. You can address each element using the nth-child selector and delay its animation according to its position. To make the animation stop at the end use the animation-fill-mode property.

li {   opacity: 0;   animation: fadeIn 0.9s 1;   animation-fill-mode: forwards; }  li:nth-child(5n+1) {   animation-delay: 0.5s; }  /*...*/  @keyframes fadeIn {   0% {     opacity: 0.0;   }   100% {     opacity: 1.0;   } } 

See this example and mind the prefixes https://jsfiddle.net/97bknLdu/