以动画的方式隐藏和显示层(注意style.height的使用，只有通过style设置的属性才能在js中通过style属性访问，否则只能用offsetstyle来获取)

本文详细介绍了如何使用CSS的overflow属性控制元素的溢出显示，并通过JavaScript实现了一个动态隐藏和显示div元素的示例。该示例展示了如何平滑地调整div的高度，以达到动画效果。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        #div1 {
            width: 300px;
            height: 600px;
            border: 1px solid red;
            overflow: hidden; /*设置溢出隐藏*/
            background-color:aquamarine;
        }
    </style>
    <input type="button" id="btn1" value="隐藏"/>
    <div id="div1">
        <h1>溢出隐藏</h1>
        <h1>溢出隐藏</h1>
        <h1>溢出隐藏</h1>
        <h1>溢出隐藏</h1>
        <h1>溢出隐藏</h1>
        <h1>溢出隐藏</h1>
        <h1>溢出隐藏</h1>
        <h1>溢出隐藏</h1>
        <input type="text" />
        <input type="radio" />
        <input type="button" value="按钮" />
        <input type="text" />
        <input type="radio" />
        <input type="button" value="按钮" />
    </div>
    <script type="text/javascript">
        var height = document.getElementById('div1').offsetHeight;
        window.onload = function () {
            document.getElementById('btn1').onclick = function () {                
                if (document.getElementById('div1').style.display == '') {//说明当前为显示状态                    
                    //以动画的方式将div隐藏
                    var intervalID = setInterval(function () {
                        //第一步，得到div的当前高度
                        var currentHeight = document.getElementById('div1').offsetHeight;//一定要用offsetheight属性来获取div的高度，而不能用style.height属性来获取，因为这个属性只有在样式中进行设置后才能获取到，offsetheight属性能够获取任何方式设置的高度。
                        //第二部，计算新的高度
                        currentHeight -= 6;
                        //将重新设置的高度进行赋值
                        if (currentHeight > 0) {
                            document.getElementById('div1').style.height = currentHeight + 'px';
                        }
                        else {
                            document.getElementById('div1').style.display = 'none';
                            clearInterval(intervalID);//清空计时器
                            document.getElementById('btn1').value = '显示';
                        }
                    }, 0.5);
                }
                else {//说明当前为隐藏状态
                    this.value = '隐藏';
                    var divObj = document.getElementById('div1');                    
                    divObj.style.display = '';
                    var startHeight =1;
                    var intervalID2 = setInterval(function () {
                        startHeight += 6;
                        if (startHeight < height) {                           
                            divObj.style.height = startHeight + 'px';                           
                        }
                        else {
                            divObj.style.height = startHeight + 'px';
                            clearInterval(intervalID2);
                        }
                    }, 1);
                }
            };
        };

    </script>
</body>
</html>