Я хочу погладить каждый nav li
один за другим. Вот мой текущий код. Он показывает весь div, теперь я хочу постепенно исчезать в каждом li
с небольшой задержкой.
$(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;
}
Я попытался использовать циклы, пытающиеся затухать в каждом li
на одной итерации, но без успеха. Поделитесь своими идеями.
ОБНОВЛЕНИЕ: код Рори Маккроссана совершенен. К сожалению, он несовместим с моим кодом, который скрывает меню при нажатии на него.
$(document).mouseup(function (e) {
var container = $("#dropDownMenu");
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.fadeOut(500);
}
});
Что пошло не так? Я только начал изучать JS и JQuery, поэтому, пожалуйста, простите меня, если это хронический вопрос.