Blende jedes Li einzeln ein

Ich möchte jedes Navi ausblenden li Einer nach dem anderen. Hier ist mein aktueller Code. Es zeigt das ganze div, jetzt möchte ich jedes einblenden li eins nach dem anderen mit leichter Verzögerung.

$(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;
}

Ich habe versucht, Loops einzublenden, um sie jeweils einzublenden li in einer Iteration, aber kein Erfolg. Bitte teilen Sie Ihre Ideen mit.

AKTUALISIEREN: Rory McCrossans Code ist perfekt. Leider ist es nicht mit meinem Code kompatibel, der das Menü ausblendet, wenn außerhalb davon geklickt wird.

$(document).mouseup(function (e) {
    var container = $("#dropDownMenu");

    if (!container.is(e.target)
       && container.has(e.target).length === 0) {
       container.fadeOut(500);
    }
});

Was schief gelaufen ist? Ich habe gerade angefangen, JS und JQuery zu lernen, also verzeihen Sie mir bitte, wenn es eine lahme Frage ist.

Sie können eine verwenden each() Aufruf zum Durchlaufen der li Elemente und delay() das fadeIn() Animation um einen inkrementellen Betrag. Versuche dies:

$("#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>

Wenn Sie das Intervall zwischen dem Verblassen von Elementen erhöhen/verringern möchten, ändern Sie den angegebenen Wert für delay() Methode. In diesem Beispiel habe ich verwendet 100ms.

Wenn Sie eine begrenzte Anzahl von Elementen haben, können Sie auch CSS-Animationen anstelle einer Javascript-Lösung verwenden. Sie können jedes Element mit dem n-ten untergeordneten Selektor ansprechen und seine Animation entsprechend seiner Position verzögern. Um die Animation am Ende anzuhalten, verwenden Sie die Eigenschaft animation-fill-mode.

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

Sehen Sie sich dieses Beispiel an und achten Sie auf die Präfixe
https://jsfiddle.net/97bknLdu/

Mach sowas mit Rückruf für Animationserfolg

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
<button id="circleMenuBtn">click</button>