一个接一个地淡出每一个li

Fade in each li one by one

本文关键字：一个 每一个 li 淡出      更新时间：2023-09-26

我想逐个淡化每个导航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，所以如果这是一个蹩脚的问题，请原谅我。

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

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>

如果元素数量有限，也可以考虑使用css动画而不是javascript解决方案。可以使用第n个子选择器对每个元素进行寻址，并根据其位置延迟其动画。若要使动画在结尾处停止，请使用动画填充模式特性。

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/

使用动画成功回调执行类似操作

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

相关文章：