Javascript 一一淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37109870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade in each li one by one
提问by kulan
I want to fade each nav lione by one. Here's my current code. It shows the whole div, now I want to fade in each lione by one with a slight delay.
我想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;
}
I tried for loops trying to fade in each liin one iteration but no success. Please share your ideas.
我尝试了 for 循环，试图li在一次迭代中淡入每个循环，但没有成功。请分享您的想法。
UPDATE: Rory McCrossan's code is perfect. Unfortunately, it's not compatible with my code that hides the menu when clicked outside it.
更新：Rory McCrossan 的代码是完美的。不幸的是，它与我的代码不兼容，当在菜单外部单击时隐藏菜单。
$(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.
什么地方出了错？我刚刚开始学习 JS 和 JQuery，所以如果这是一个蹩脚的问题，请原谅我。
回答by Rory McCrossan
You can use an each()call to loop through the lielements and delay()the fadeIn()animation by an incremental amount. Try this:
您可以使用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>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.
如果要增加/减少项目褪色的间隔，请更改提供给delay()方法的值。在这个例子中，我使用了100ms.
回答by Philipp Lehmann
If you have a limited number of elements you could also consider using css-animations instead of a javascript solution. You can address each element using the nth-child selector and delay its animation according to its position. To make the animation stop at the end use the animation-fill-mode property.
如果您的元素数量有限，您还可以考虑使用 css-animations 而不是 javascript 解决方案。您可以使用第 n 个子选择器寻址每个元素并根据其位置延迟其动画。要使动画在最后停止，请使用 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;
}
}
See this example and mind the prefixes https://jsfiddle.net/97bknLdu/
请参阅此示例并注意前缀 https://jsfiddle.net/97bknLdu/
回答by Pranav C Balan
Do something like this with animation success callback
用动画成功回调做这样的事情
$(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>