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.
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
.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With