jQuery显示与隐藏动画
<html>
<head>
<title></title>
</head>
<style>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
background:red;
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('button').eq(0).click(function(){ //$('button')是获取到所有的button数组，eq(0)代表第一个button
//$('div').slideDown(1000) //slideDown(1000),是表示从上往下滑出来，1000代表滑出整个需要的时间，单位是毫秒，可自行设置时间
$('div').show(1000) //show(1000),是从一个点动画出来，1000也是显示整个div所需的时间，单位是毫秒
})
$('button').eq(1).click(function(){
//$('div').slideUp(1000) //同上slideDown(),slideUp是表示从下往上滑到无
$('div').hide(1000) //同上show(),hide()是隐藏起来的动画
})
$('button').eq(2).click(function(){
//$('div').slideToggle(1000) //slideToggle(),当div隐藏时点击，触发的是slideDown(),div显示时点击，触发的是slideUp
$('div').toggle(1000) //toggle(),当div隐藏是点击，触发show(),div显示触发的是hide()
})
})
</script>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div>
</div>
</body>
</html>
效果图
