javascript 一个接一个淡入div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3768607/
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 divs one after another
提问by Alex Sadler
Hey there guys, Im good with HTML and CSS but have only jsut started to scratch the surface of jQuery. I'm looking to make 3 divs fade in on page load one after another. So far I have this
嘿伙计们，我擅长 HTML 和 CSS，但只有 jsut 开始触及 jQuery 的表面。我希望让 3 个 div 在页面加载时一个接一个地淡入淡出。到目前为止我有这个
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().fadeIn(1500);
$('#3').hide().fadeIn(1500);
</script>
I heard that to use css to set the display to none is a nightmare for anyone with a non JavaScript browser so I used the hide function to initially hide the divs.
我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人来说都是一场噩梦，所以我使用了 hide 函数来最初隐藏 div。
But this only fades them in all at once. Any ideas?
但这只会让它们一下子消失。有任何想法吗？
回答by Nick Craver
You can .delay()each so the one before fades in at the right time, for example:
你可以.delay()让前一个在正确的时间淡入，例如：
$("#1, #2, #3").hide().each(function(i) {
$(this).delay(i*1500).fadeIn(1500);
});
This fades them in...in the same order they occur in the page which is usually what you're after, the first is delayed 0 so it's instant, the second is delayed 1500ms (so when the first finishes, etc). In the .each()callback iis the index, starting with 0 so you can use that to quickly calculate the right delay here.
这使它们淡入......按照它们出现在页面中的相同顺序，这通常是您所追求的，第一个延迟 0 所以它是即时的，第二个延迟 1500 毫秒（所以当第一个完成时，等等）。在.each()回调中i是索引，从 0 开始，因此您可以使用它来快速计算此处的正确延迟。
Another advantage here is this approach is much easier to maintain, give them a class for example then you can just do:
这里的另一个优点是这种方法更容易维护，例如给他们一个类，然后你可以这样做：
$(".fadeMe").hide().each(function(i) {
$(this).delay(i*1500).fadeIn(1500);
});
Then you require zero maintenance on the JavaScript side to add additional <div>elements to fade.
然后您需要在 JavaScript 端进行零维护以添加额外的<div>元素来淡入淡出。
回答by Paul Hadfield
The fade in command contains a call back function, see documentation. This means you could chain the events.
淡入命令包含回调函数，请参阅文档。这意味着您可以链接事件。
<script type="text/javascript">
$('#1, #2, #3').hide();
$('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})});
</script>
回答by José Manuel Lucas
<script type="text/javascript">
$('#1').hide().fadeIn(1500, function(){
$('#2').hide().fadeIn(1500, function(){
$('#3').hide().fadeIn(1500);
});
});
</script>
回答by Timo Willemsen
回答by Atharva
Here is a cleaner and generic way to achieve this effect: check it out on http://jsfiddle.net/BztLx/20/
这是实现此效果的更简洁通用的方法：在http://jsfiddle.net/BztLx/20/上查看
Logic trick relies on the callback functionality of the fadeInand using .eq()as an iterator over the selected elements.
逻辑技巧依赖于 和 的回调功能，fadeIn并将其.eq()用作所选元素的迭代器。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {
display = typeof display !== 'undefined' ? display : "block";
var els = $(selectorText), i = 0;
(function helper() {
els.eq(i++).fadeIn(speed, helper).css("display", display);
if (callback && i === els.length) callback();
})();
}
sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
console.log("I am just an optional callback");
});?
});
</script>
</head>
<body><style media="screen" type="text/css">
.hello {
background-color: blue;
height:50px;
width: 50px;
display: none;
}
</style>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
</body></html>
