Затухание в каждом ли по одному

Я хочу погладить каждый 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, поэтому, пожалуйста, простите меня, если это хронический вопрос.

Ответы

Ответ 1

Вы можете использовать вызов each() для циклического прохождения элементов li и delay() анимации fadeIn() с помощью дополнительной суммы. Попробуйте следующее:

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

Ответ 2

Если у вас есть ограниченное количество элементов, вы также можете рассмотреть возможность использования css-анимаций вместо javascript-решения. Вы можете обращаться к каждому элементу с помощью селектора nth-child и задерживать его анимацию в соответствии с ее положением. Чтобы завершить анимацию в конце, используйте свойство анимации-заливки.

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

Смотрите этот пример и обратите внимание на префиксы https://jsfiddle.net/97bknLdu/

Ответ 3

Сделайте что-нибудь подобное с обратным вызовом анимации

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