abstract：<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: #ccc;
border: solid pink 2px00;
}
#div7 {
background-color: blue;
position: absolute;
}
button {
margin: 10px 0;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$('#bt1').click(function(){
$('#div1').hide(1000)
})
$('#bt2').click(function(){
$('#div1').show(1000)
})
$('#bt3').click(function(){
$('#div2').toggle(1000)
})
$('#bt4').click(function(){
$('#div3').slideUp(1500)
})
$('#bt5').click(function(){
$('#div3').slideDown(1500)
})
$('#bt6').click(function(){
$('#div4').slideToggle(1500)
})
$('#bt7').click(function(){
$('#div5').fadeOut(2000)
})
$('#bt8').click(function(){
$('#div5').fadeIn(2000)
})
$('#bt9').click(function(){
$('#div6').fadeToggle(2000)
})
$('#bt10').click(function(){
$('#div5').fadeTo(2000,.3)
})
$('#bt11').click(function(){
$('#div7').animate({
height:'400px',
opacity:'.3'
},2000)
$('#div7').animate({
width:'400px',
opacity:'1'
},2000)
$('#div7').animate({
height:'200px',
opacity:'.3'
},2000)
$('#div7').animate({
width:'200px',
opacity:'1'
},2000)
})
})
</script>
<button id="bt1">点击隐藏</button>
<button id="bt2">点击显示</button>
<div id="div1"></div>
<button id="bt3">隐藏显示切换</button>
<div id="div2"></div>
<button id="bt4">滑出</button>
<button id="bt5">划入</button>
<div id="div3"></div>
<button id="bt6">滑入滑出切换</button>
<div id="div4"></div>
<button id="bt7">淡出</button>
<button id="bt8">淡入</button>
<button id="bt10">淡出30％透明度</button>
<div id="div5"></div>
<button id="bt9">淡出淡入切换</button>
<div id="div6"></div>
<button id="bt11">自定义动画</button>
<div id="div7"></div>
</body>
</html>