原生js设置div隐藏或者显示_JavaScript动画方式控制div元素的隐藏和显示

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="点击