javascript - 逐行淡入

Question

我想一个接一个地淡化每个导航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;
}

我尝试了 for 循环，试图在一次迭代中淡入每个 li 但没有成功。请分享您的想法。

更新:Rory McCrossan 的代码非常完美。不幸的是，它与我在菜单外单击时隐藏菜单的代码不兼容。

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

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

出了什么问题？我刚刚开始学习 JS 和 JQuery，所以如果这是一个蹩脚的问题，请原谅我。

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

如果您想增加/减少元素淡出之间的间隔，请更改提供给 delay() 方法的值。在此示例中，我使用了 100ms。

更新 - 要在纯 JS 中实现相同的效果，您可以使用超时和 transitionCSS 中的不透明度，如下所示:

document.querySelectorAll("#dropDownMenu li").forEach((li, i) => {
  setTimeout(() => {
    li.classList.add('show');
  }, 100 * i);
});

.sub-menu {
  position: absolute;
  z-index: 1000;
}

.sub-menu li {
  opacity: 0;
  transition: opacity 0.5s;
}

.sub-menu li.show {
  opacity: 1;
}

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