abstract：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuer动画总结</title>
<style>
*{margin:0;padding: 0;}
.clear{clear:both;}
.ma
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuer动画总结</title>
<style>
*{margin:0;padding: 0;}
.clear{clear:both;}
.main{ width:1200px;margin:0 auto; }
.top{width: 1200px}
.box1{position: absolute;
background:red;
height: 400px;
width: 1200px;}
.fade,.fadetoggle,.fadeto,.huadong,.big{position: relative;width: 200px;height: 200px;background: #fff;float: left;font-size: 14px}
button{float: left;width: 80px;height: 30px;line-height: 30px;}
</style>
<script type='text/javascript' src="jquery-3.3.1.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.but1').click(function(){
$('div.box1').hide(1500)
})
$('.but2').click(function(){
$('div.box1').show(1500)
})
$(".but3").click(function(){
$('.fade').fadeIn(1500)
})
$(".but4").click(function(){
$('.fade').fadeOut(1500)
})
$(".but5").click(function(){
$('.fadetoggle').fadeToggle(1500)
})
$(".but6").click(function(){
$('.fadeto').fadeTo(1500,0.8)
})
$('.huadong').hide()
$(".but7").click(function(){
$('.huadong').slideDown(1500)
})
$(".but8").click(function(){
$('.huadong').slideUp(1500)
})
$(".but9").click(function(){
$('.huadong').slideToggle(1500)
})
$(".but10").click(function(){
$('.big').animate({fontSize:'30px',left:'200px',opacity:0.8,height:'400px',width:'400px'},1500)
})
$(".but11").click(function(){
$('.big').animate({fontSize:'14px',left:'0px',opacity:1,height:'200px',width:'200px'},1500)
})
$(".but12").click(function(){
$('.big').animate({width:'toggle'},1500)
})
$(".but13").click(function(){
$('.big').animate({height:'toggle'},1500)
})
})
</script>
</head>
<body>
<div>
<div>
<button>隐藏</button>
<button>显示</button>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>半透明</button>
<button>下滑</button>
<button>上滑</button>
<button>滑动切换</button>
<button>点击变大</button>
<button>点击还原</button>
<button>横向切换</button>
<button>垂直切换</button>
</div>
<div></div>
<div>
<div>淡入淡出，</div>
<div>淡入淡出一个按钮切换</div>
<div>可设置透明度</div>
<div>
<p>下滑显示，上滑隐藏</p>
<p>下滑显示，上滑隐藏</p>
<p>下滑显示，上滑隐藏</p>
</div>
<div>
<p>点击变大特效</p>
<p>点击变大特效</p>
<p>点击变大特效</p>
</div>
</div>
</div>
</body>
</html>
