下面这段代码运行之后,所有的div在同一时间都显示出来了,但这并不是我想要的效果,我想要的效果是,运行页面后先显示id为1的这个div,当这个div显示完毕以后再显示下一个div也就是id为2的div,依次类推,知道显示完所有的DIV。不知道我说明白了没有。请问要想实现如上效果,这代码应该怎么改呢?在度娘上找了好久也没有找到答案。function show(){
var ds = $("div[name='d']")
for(var i = 1; i <= ds.length;i++){
$("#"+i).animate({opacity:1.0},5000);
}
}
$(function(){
var ds = $("div[name='d']")
for(var i = 1; i <= ds.length;i++){
$("#"+i).animate({opacity:0},0);
}
})
window.setTimeout("show()",500);
<body style="background:#ccc">
<div style="background: #f00; width: 1000px; height:50px; border: 1px solid #999" id="1" name="d"></div>
<div style="background: #ff0; width: 1000px; height:50px;" id="2" name="d"></div>
<div style="background: #f00; width: 1000px; height:50px;" id="3" name="d"></div>
</body>谢谢了。
var ds = $("div[name='d']")
for(var i = 1; i <= ds.length;i++){
$("#"+i).animate({opacity:1.0},5000);
}
}
$(function(){
var ds = $("div[name='d']")
for(var i = 1; i <= ds.length;i++){
$("#"+i).animate({opacity:0},0);
}
})
window.setTimeout("show()",500);
<body style="background:#ccc">
<div style="background: #f00; width: 1000px; height:50px; border: 1px solid #999" id="1" name="d"></div>
<div style="background: #ff0; width: 1000px; height:50px;" id="2" name="d"></div>
<div style="background: #f00; width: 1000px; height:50px;" id="3" name="d"></div>
</body>谢谢了。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var n = 1;
function show(){
$("#"+n).animate({opacity:1.0},2000, function(){
var ds = $("div[name='d']");
if(n<ds.size()){
n++;
show();
}
});
}
$(function(){
var ds = $("div[name='d']")
for(var i = 1; i <= ds.length;i++){
$("#"+i).animate({opacity:0},0);
}
window.setTimeout("show()",500);
})</script><body style="background:#ccc">
<div style="background: #f00; width: 1000px; height:50px; border: 1px solid #999" id="1" name="d"></div>
<div style="background: #ff0; width: 1000px; height:50px;" id="2" name="d"></div>
<div style="background: #f00; width: 1000px; height:50px;" id="3" name="d"></div>
</body>
谢谢了。