<!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>
    <title></title>
    <style>
    #myDiv{ border:5px; solid #C4E3FD;filter: Alpha(Opacity=80); background:#C4E3FD; width:300px; height:400px; margin:0 0 0 0; float:right; display:block }

    </style>
    <script type="text/javascript">
        var prox;
        var proy;
        var proxc;
        var proyc;
        function show(id) {/*--打开--*/
            clearInterval(prox);
            clearInterval(proy);
            clearInterval(proxc);
            clearInterval(proyc);
            var o = document.getElementById(id);
            o.style.display = "block";
            o.style.width = "1px";
            o.style.height = "1px";
            prox = setInterval(function () { openx(o, 300) }, 10);
        }
        function openx(o, x) {/*--打开x--*/
            var cx = parseInt(o.style.width);
            if (cx < x) {
                o.style.width = (cx + Math.ceil((x - cx) / 5)) + "px";
            }
            else {
                clearInterval(prox);
                proy = setInterval(function () { openy(o, 400) }, 10);
            }
        }
        function openy(o, y) {/*--打开y--*/
            var cy = parseInt(o.style.height);
            if (cy < y) {
                o.style.height = (cy + Math.ceil((y - cy) / 5)) + "px";
            }
            else {
                clearInterval(proy);
            }
        }
        function closeed(id) {/*--关闭--*/
            clearInterval(prox);
            clearInterval(proy);
            clearInterval(proxc);
            clearInterval(proyc);
            var o = document.getElementById(id);
            o.style.display = "block";
            o.style.height = "400px";
            if (o.style.display == "block") {
                proyc = setInterval(function () { closey(o) }, 10);
            }
        }
        function closey(o) {/*--打开y--*/
            var cy = parseInt(o.style.height);
            //    if (cy > 0) {
            if (cy > 0) {
                //如果没有((cy - Math.ceil(cy / 5)) < 30) 则全部关闭该div div在界面上看不见了
                if ((cy - Math.ceil(cy / 5)) < 30) {
                    o.style.height = "30px";
                }
                else {
                    o.style.height = (cy - Math.ceil(cy / 5)) + "px";
                }
            }
            else {
                clearInterval(proyc);
                proxc = setInterval(function () { closex(o) }, 10);
            }
        }
        function closex(o) {/*--打开x--*/
            var cx = parseInt(o.style.width);
            if (cx > 0) {
                o.style.width = (cx - Math.ceil(cx / 5)) + "px";
            }
            else {
                clearInterval(proxc);
                o.style.display = "none";
            }
        }
    </script>
</head>
<body>
<div id="myDiv" style=" float:right; z-index:2; width:300; height:400"  >
 <div id="myhandle">
 <div><a href="#" onclick = "show('myDiv');return false;">打开div</a></div>
 <div><a href="#" onclick = "closeed('myDiv');return false;">关闭div</a></div>
 </div>
 </div>
</body>
</html>