jQuery动画
hide() 隐藏
show() 显示
slideUp() 滑上去
slideDown() 滑下来
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background-color: #1BA1E6;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="隐藏"/>
<input type="button" id="btn2" value="显示" />
<input type="button" id="btn3" value="滑上去" />
<input type="button" id="btn4" value="滑下来" />
<div id="box">
</div>
</body>
<script src="jquery.min.js"></script>
<script>
$(btn1).click(function(){
$("#box").hide(2000);
});
$(btn2).click(function(){
$("#box").show(2000);
});
$(btn3).click(function(){
$("#box").slideUp(2000);
});
$(btn4).click(function(){
$("#box").slideDown(2000);
});
</script>
</html>