逐一淡入每一个 [英] Fade in each li one by one

问题描述

我想逐个淡化每个导航 li 。这是我目前的代码。它显示了整个div，现在我希望逐渐淡入每个 li ，并略微延迟一次。

  $（document）.ready（function（）{
 $（＃circleMenuBtn）。click（function （）{
 $（＃dropDownMenu）。fadeIn（500）; 
}）; 
}）; 
  

< div class = sub-menuid =dropDownMenu>
< ul id =navbar>
< li>第一和LT; /锂>
< li>第二个< / li>
< li>第三< / li>
< li>第四< / li>
< li>第五< / li>
< / ul>
< / div>


.sub-menu {
位置：绝对;
z-index：1000;
颜色：#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（）动画增量。试试这个：

（$）（this）.delay（100 * i） ）.fadeIn（500）;}）;

.sub -menu {position：absolute; z-index：1000; / *颜色：#fff;右：5px; * /}。子菜单li {display：none;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =子菜单id =dropDownMenu> < ul id =navbar> <李>第一和LT; /锂> <李>第二个< /锂> <李>第三< /锂> <李>第四< /锂> <李>第五< /锂> < / div>

要增加/减少项目渐变之间的间隔，请更改提供给 delay（）方法的值。在这个例子中，我使用 100ms 。

I want to fade each nav li one by one. Here's my current code. It shows the whole div, now I want to fade in each li one by one with a slight delay.

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

I tried for loops trying to fade in each li in one iteration but no success. Please share your ideas.

UPDATE: Rory McCrossan's code is perfect. Unfortunately, it's not compatible with my code that hides the menu when clicked outside it.

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

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

What went wrong? I've just started to learn JS and JQuery so please forgive me if it's a lame question.

解决方案

You can use an each() call to loop through the li elements and delay() the fadeIn() animation by an incremental amount. Try this:

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

If you want to increase/decrease the interval between items fading, change the value provided to the delay() method. In this example I used 100ms.

这篇关于逐一淡入每一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！