javascript 使用jquery延迟一一加载div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15772529/
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
Load div one by one with a delay using jquery
提问by swapnesh
This is my whole code..what I am trying to do is to have-. when DOM is ready first div shows on page and second one after a delay and then third one and so on up to 150.
这是我的全部代码..我想做的是拥有-。当 DOM 准备好时，第一个 div 显示在页面上，延迟后显示第二个，然后是第三个，依此类推，最多 150。
Problem with the current code is that, whole 150 div loads at once after a small delay.
当前代码的问题是，整个 150 div 在一小段延迟后立即加载。
My code-
My code——
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test for dashed div</title>
<style type="text/css">
.dashdiv
{
width: 150px;
height: 50px;
background: #ae2d3e;
float:left;
box-shadow: 10px 10px 6px #d4a7b0;
margin: 5px;
}
</style>
</head>
<body>
<?php
for($i =0; $i < 150; $i++)
{
?>
<div class="dashdiv">
This is a div text
</div>
<?php
}
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.dashdiv').each(function()
{
$(this).hide().delay(1000).fadeIn(1850);
});
});
</script>
</body>
</html>
回答by wes
The problem you're facing, which no one has mentioned, is that jQuery delay()is only chainable on an fx queue. So, using it after hide()will not work. A quick fix to get it working would be to use an effect in place of hide(), ie:
您面临的问题（没人提到过）是 jQuerydelay()只能在 fx 队列上链接。所以，在之后使用它是hide()行不通的。让它工作的一个快速解决方法是使用效果代替hide()，即：
$('div.dashdiv').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1850);
});
回答by Boaz - Reinstate Monica
Try using the indexargument that is automatically assigned for every iteration of eachto extend the delay in a linear manner:
尝试使用index为 的每次迭代自动分配的参数each以线性方式扩展延迟：
$('div.dashdiv').each(function(i) {
$(this).delay(1000*i).fadeIn(1850);
});
Also, following your comment, the style of the divelements should be changed to make them hidden:
此外，根据您的评论，div应更改元素的样式以使其隐藏：
.dashdiv {
display:none;
...
}
回答by Zaheer Ahmed
You can use :
您可以使用 ：
Html:
网址：
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
jQuery:
jQuery：
$('#parent .child')
.hide()
.each(function(index){
var _this = this;
setTimeout( function(){ $(_this).fadeIn(); }, 5000*index );
});
回答by louisbros
Here's a way to delay and fadeIn a divonly once the previous divhas finished.
It uses the fadeIn callback to move to the next div in the array:
这是一种div仅在前一个div完成后延迟和淡入淡出的方法。它使用fadeIn 回调移动到数组中的下一个div：
// hide all
$('.dashdiv').hide();
// fade in each div one by one
divs = document.getElementsByClassName('dashdiv');
(function fade(i){
if(i < divs.length){
$(divs[i]).delay(1000).fadeIn(1850, function(){
fade(++i);
});
}
})(0);
Or without getElementsByClassName.
或者没有getElementsByClassName。
// hide all
$('.dashdiv').hide();
// fade in each div one by one
(function fade(i){
if(i < $('.dashdiv').length){
$($('.dashdiv')[i]).delay(1000).fadeIn(1850, function(){
fade(++i);
});
}
})(0);
