Fade in jedem li eins nach dem anderen

Question

Ich möchte jedes nav li eins nach dem anderen verblassen. Hier ist mein aktueller Code. Es zeigt das ganze div, jetzt will ich jedes li eins nach dem anderen mit einer leichten Verzögerung einblenden.

$(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, für Schleifen in jedem li in einer Iteration zu verblassen versucht, aber ohne Erfolg. Bitte teilen Sie Ihre Ideen.

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

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

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

Was ist schiefgelaufen? Ich habe gerade angefangen, JS und JQuery zu lernen, also bitte vergib mir, wenn es eine lahme Frage ist.

Answer 1

Sie können einen each() Aufruf Schleife durch die li Elemente und delay() der fadeIn() Animation durch einen inkrementellen Betrag verwenden. Versuchen Sie folgendes:

$("#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 erhöhen möchten/verringern den Abstand zwischen den einzelnen Posten Fading, ändern Sie den Wert auf die delay() Methode zur Verfügung gestellt. In diesem Beispiel habe ich 100ms verwendet.

Answer 2

etwas zu tun mit 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; 
 
}

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

Answer 3

Wenn Sie eine begrenzte Anzahl von Elementen haben Sie auch statt eine Javascript-Lösung mit CSS-Animationen in Erwägung ziehen könnte. Sie können jedes Element mit dem n-ten Kind-Selektor adressieren und seine Animation entsprechend seiner Position verschieben. Um die Animation am Ende zu stoppen, 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; 
    } 
} 

diesem Beispiel sehen und die Präfixe https://jsfiddle.net/97bknLdu/