jQuery实现此功能相对比较简单，具体参阅点击按钮动画方式隐藏和显示div一章节。
结合CSS3实现此功能也非常便利和适合，具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节。
原生JavaScript实现稍显麻烦，下面就通过代码实例介绍一下如何实现此功能。
代码实例如下：[HTML] 纯文本查看 复制代码运行代码
蚂蚁部落#antzone{
width:200px;
background-color:green;
}
window.οnlοad=function(){
var speed=5;
var odiv=document.getElementById("antzone");
var obt=document.getElementById("bt");
obt.οnclick=function(){
if(odiv.style.display=="block"){
var timer=setInterval(function(){
if(parseInt(odiv.style.height)>0){
var H=parseInt(odiv.style.height);
H=H-speed;
odiv.style.height=H+"px";
} else{
odiv.style.display="none";
obt.value="点击显示";
clearInterval(timer);
}
},50)
}else{
var timer=setInterval(function(){
if(parseInt(odiv.style.height)<100){
odiv.style.display="block";
var H=parseInt(odiv.style.height);
H=H+speed;
odiv.style.height=H+"px";
}else{
obt.value="点击隐藏";
clearInterval(timer);
}
},50)
}
}
}
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
(1).window.οnlοad=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
(2).var speed=5，设置高度调整的幅度。
(3).var odiv=document.getElementById("antzone"),获取id属性值为antzone的元素对象。
(4).var obt=document.getElementById("bt"),获取按钮元素对象。
(5).obt.οnclick=function(){}，为按钮注册onclick事件处理函数。
(6).if(odiv.style.display=="block"){}，判断元素是否处于显示状态。
(7).var timer=setInterval(function(){
if(parseInt(odiv.style.height)>0){
var H=parseInt(odiv.style.height);
H=H-speed;
odiv.style.height=H+"px";
}else{
odiv.style.display="none";
obt.value="点击显示";
clearInterval(timer);
}
},50),使用定时器函数不断的设置元素的高度。
odiv.style.height获取的是一个字符串，并且带有单位，所以必须使用parseInt()转换一下。
二.相关阅读:
(1).setInterval()方法参阅setInterval()一章节。
(2).parseInt()方法参阅JavaScript parseInt()一章节。
(3).clearInterval()方法参阅window.clearInterval()一章节。
