使用jquery以一个延迟逐个加载div [英] Load div one by one with a delay using jquery
问题描述
这是我的整个代码。我试图做的是让 - 。当DOM准备好时，第一个div显示在页面上，第二个显示在延迟之后，然后是第三个，依此类推直到150.
现在的代码的问题是，整个
我的代码 -
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title>测试虚线div< / title>
< style type =text / css>
.dashdiv
{
width：150px;
height：50px;
背景：＃ae2d3e;
float：left;
box-shadow：10px 10px 6px＃d4a7b0;
margin：5px;
}
< / style>
< / head>
< body> （$ i = 0; $ i <150; $ i ++）
{
？>
<？php
< div class =dashdiv>
这是一个div文本
< / div>
<？php
}
？>
< script type =text / javascriptsrc =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>
您遇到的问题，没有人提到的是，jQuery delay（）只能在fx队列上链接。因此，在 hide（）之后使用它将不起作用。快速修复它的工作原理是使用效果代替 hide（），即：
<$ p $（$）$（$）$（$） ;
}）;
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.
Problem with the current code is that, whole 150 div loads at once after a small delay.
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>
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:
$('div.dashdiv').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1850);
});
这篇关于使用jquery以一个延迟逐个加载div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
