逐行淡入

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

我尝试了循环，试图在一次迭代中淡出每个 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，所以如果这是一个蹩脚的问题，请原谅我。

原文由 kulan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

You can use an each() call to loop through the li elements and delay() the fadeIn() animation by an incremental amount.尝试这个：

 $("#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 中实现相同的效果，您可以使用超时和 transition CSS 中的不透明度，如下所示：

 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>

原文由 Rory McCrossan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您的元素数量有限，您还可以考虑使用 css-animations 而不是 javascript 解决方案。您可以使用 nth-child 选择器寻址每个元素并根据其位置延迟其动画。要使动画在最后停止，请使用 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;
  }
}

请参阅此示例并注意前缀 https://jsfiddle.net/97bknLdu/

原文由 Philipp Lehmann 发布，翻译遵循 CC BY-SA 3.0 许可协议