Fade jedes li nacheinander ein

Ich möchte zu verblassen jeder nav - li eins nach dem anderen. Hier ist meine aktuelle code. Es zeigt das ganze div, jetzt will ich fade-in jedem li nacheinander mit einer leichten 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;
}

Versuchte ich for-Schleifen versucht, fade-in jedem li in einer iteration, aber kein Erfolg. Bitte teilen Sie Ihre Ideen.

UPDATE: Rory McCrossan code ist perfekt. Leider ist es nicht kompatibel mit meinem code, der das Menü ausblendet, wenn geklickt.

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

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

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

InformationsquelleAutor der Frage kulan | 2016-05-09

  1. 12

    Wenn Sie haben eine begrenzte Anzahl von Elementen können Sie auch mithilfe von css-Animationen anstelle einer javascript-Lösung.
    Sie können jedes element mit dem nth-child-Selektor und die Verzögerung der animation nach seiner position. Um die animation zu stoppen, die am Ende den animation-fill-mode-Eigenschaft.

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

    Siehe dieses Beispiel und achte auf die Präfixe
    https://jsfiddle.net/97bknLdu/

    InformationsquelleAutor der Antwort Philipp Lehmann

Schreibe einen Kommentar