abstrak：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuer動(dòng)畫總結(jié)</title>
<style>
*{margin:0;padding: 0;}
.clear{clear:both;}
.ma
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuer動(dòng)畫總結(jié)</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>滑動(dòng)切換</button>
<button>點(diǎn)擊變大</button>
<button>點(diǎn)擊還原</button>
<button>橫向切換</button>
<button>垂直切換</button>
</div>
<div></div>
<div>
<div>淡入淡出，</div>
<div>淡入淡出一個(gè)按鈕切換</div>
<div>可設(shè)置透明度</div>
<div>
<p>下滑顯示，上滑隱藏</p>
<p>下滑顯示，上滑隱藏</p>
<p>下滑顯示，上滑隱藏</p>
</div>
<div>
<p>點(diǎn)擊變大特效</p>
<p>點(diǎn)擊變大特效</p>
<p>點(diǎn)擊變大特效</p>
</div>
</div>
</div>
</body>
</html>
