Dissolvenza in ogni li uno a uno

Question

Voglio sbiadire ogni nav li uno per uno. Ecco il mio codice attuale. Mostra l'intero div, ora voglio sbiadire ogni li uno alla volta con un leggero ritardo.

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

ho provato per cicli cercano di dissolvenza in ciascuna li in un'iterazione, ma senza successo. Per favore condividi le tue idee.

UPDATE: il codice di Rory McCrossan è perfetto. Sfortunatamente, non è compatibile con il mio codice che nasconde il menu quando viene cliccato al di fuori di esso.

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

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

Cosa non ha funzionato? Ho appena iniziato a imparare JS e JQuery quindi per favore perdonami se si tratta di una domanda zoppa.

Answer 1

È possibile utilizzare un each() chiamata il ciclo tra gli elementi e lidelay() l'animazione fadeIn() di una quantità incrementale. Prova questo:

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

Se si desidera aumentare/diminuire l'intervallo tra gli elementi dissolvenza, modificare il valore fornito al metodo delay(). In questo esempio ho usato 100ms.

Answer 2

fare qualcosa di simile con 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

Se si dispone di un numero limitato di elementi si potrebbe anche considerare l'utilizzo di CSS-animazioni invece di una soluzione javascript. Puoi indirizzare ciascun elemento usando il selettore nth-child e ritardarne l'animazione in base alla sua posizione. Per interrompere l'animazione alla fine, usa la proprietà 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; 
    } 
} 

vedere questo esempio e la mente i prefissi https://jsfiddle.net/97bknLdu/