下面这段代码运行之后,所有的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>谢谢了。

解决方案 »

  1.   


    <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>
      

  2.   

    animate 的回调函数是当前动画结束后执行的,在其中进行发起下一次操作这样一个个动画就连起来了。
      

  3.   

    那为什么我前面那么写不行?难道说jquery的动画会一起执行,比如说:我写了两行动画代码,第二行动画代码为什么不在第一个动画执行完了之后再执行第二个?而是一起执行?
    谢谢了。
      

  4.   

    你的代码基本上同时启动动画, 要先后执行动画,必须在回调函数中启动后面的, 或者自己设置setTimeout先后执行,这样就麻烦了.