JavaScript动画方式控制div元素的隐藏和显示
JavaScript动画方式控制div元素的隐藏和显示属于前端实例代码，有关更多实例代码大家可以查看。
jQuery实现此功能相对比较简单，具体参阅点击按钮动画方式隐藏和显示div一章节。
结合CSS3实现此功能也非常便利和适合，具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节。
原生JavaScript实现稍显麻烦，下面就通过代码实例介绍一下如何实现此功能。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#antzone{
width:200px;
background-color:green;
}
</style>
<script>
window.onload=function(){
var speed=5;
var odiv=document.getElementById("antzone");
var obt=document.getElementById("bt");
obt.onclick=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)
}
}
}
</script>
</head>
<body>
<div id="antzone" style="display:block;height:100px;"></div>
<input type="button" id="bt" value="点击隐藏"/>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var speed=5，设置高度调整的幅度。
（3）.var odiv=document.getElementById("antzone"),获取id属性值为antzone的元素对象。
（4）.var obt=document.getElementById("bt"),获取按钮元素对象。
（5）.obt.onclick=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()一章节。
JavaScript动画方式控制div元素的隐藏和显示，这样的场景在实际项目中还是用的比较多的，关于JavaScript动画方式控制div元素的隐藏和显示就介绍到这了。