js 如何实现div层的下滑，覆盖下面的那个层

 求一个问题，如何让蓝色的慢慢的滑下来，然后绿色的也慢慢的滑下去至到消失，蓝色滑至完全覆盖绿色然后停止，蓝色占据绿色原来的位置不显示。（动画效果）

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #blue{
    height:200px;
    background-color:#00F;
    }
    #green{
    height:200px;
    background-color:#0F0;
    }
    </style>
    <script type="text/javascript">
    function init(){
    var b=document.getElementById("blue");
    var g=document.getElementById("green");
    hides(b,g);
    }
    function getHeight(obj){
    var style="";
    if(document.defaultView&&document.defaultView.getComputedStyle){
    style=document.defaultView.getComputedStyle(obj);
    }else{
    style=obj.currentStyle;
    }
    return style.height=="auto"?obj.offsetHeight:style.height;
    }
    function hides(b,g){
    var bw=getHeight(b);
    var gw=getHeight(g);
    b.style.height=parseInt(bw)+2+"px";
    g.style.height=parseInt(gw)-2+"px";
    var p=window.setTimeout(function(){hides(b,g)},100);
    if(parseInt(gw)==0){
    window.clearTimeout(p);
    }
    }
    window.onload=init;
    </script>
    </head><body>
    <div id="blue"></div>
    <div id="green"></div>
    </body>
    </html>这样试试
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #blue{
    height:200px;
    background-color:#00F;
    position:relative;
    }
    #green{
    height:200px;
    background-color:#0F0;
    }
    </style>
    <script type="text/javascript">
    function init(){
    var b=document.getElementById("blue");
    var g=document.getElementById("green");
    hides(b,g);
    }
    function getTop(obj){
    var style="";
    if(document.defaultView&&document.defaultView.getComputedStyle){
    style=document.defaultView.getComputedStyle(obj);
    }else{
    style=obj.currentStyle;
    }
    return style.top=="auto"?obj.offsetTop:style.top;
    }
    function hides(b,g){
    var bw=getTop(b);
    var gw=getTop(g);
    //alert(bw+":"+gw);
    //b.style.height=parseInt(bw)+2+"px";
    //g.style.height=parseInt(gw)-2+"px";
    b.style.top=parseInt(bw)+2+"px";
    var p=window.setTimeout(function(){hides(b,g)},100);
    if(parseInt(gw)<=parseInt(bw)+8){
    window.clearTimeout(p);
    }
    }
    window.onload=init;
    </script>
    </head><body>
    <div id="blue"></div>
    <div id="green"></div>
    </body>
    </html>
    这样试试