abstrait：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<title>JQ動畫效果</title>
<style>
*{margin:0px;padding: 0px;}
a{text-decoration: none;color:#000;font-size: 12px; }
li{list-style: none;}
.clear{clear: both;}
.header{width:100%;}
.content{width:1200px;margin: 0px auto;height: 100px;}
button{outline: none; color: #fff;background-color: #4caf50;border: none;padding: 5px 12px;font-size: 16px;border-radius: 14px;margin: 13px;}
.header_1{width:1200px;height: 60px; margin: 0px auto;background: linear-gradient(to right,#000,#fff);line-height: 40px;}
.header_1_a{width: 150px;height: 220px;margin-right: 20px; float: left;}
.box1,.box2,.box3,.box4{width: 100px;height: 100px;background: orange;margin-top: 20px;border-radius: 10px;}
.header_1_b{height: 200px;width: 1200px;margin: 0px auto;}
.box5{width: 90px;height: 90px;background: orchid;border-radius: 90px;margin: 4px;position: absolute;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.button_1').click(function(){
$('.p_1').hide(1000) //點擊隱藏
})
$('.button_2').click(function(){
$('.p_1').show(1000) //點擊顯示
})
$('.p_2').hide()
$('.button_3').click(function(){
$('.p_2').slideDown(1000) //下滑顯示
})
$('.button_4').click(function(){
$('.p_2').slideUp(1000) //上滑隱藏
})
$('.button_5').click(function(){
$('.p_3').slideToggle(500) //顯示隱藏切換
})
$('.box1').hide()
$('.button_6').click(function(){
$('.box1').fadeIn(1000) //淡入
})
$('.button_7').click(function(){
$('.box2').fadeOut(1000) //淡出
})
$('.button_8').click(function(){
$('.box3').fadeToggle(1000) //切換
})
$('.button_9').click(function(){
$('.box4').fadeTo(1000,0.2) //淡出到指定值
})
$('.button_10').click(function(){
$('.p_4').animate({fontSize:'40px'},1000) //點擊字體放大
})
$('.button_11').click(function(){
$('.box5').animate({
//left :'1000px', //如果想對元素位置進(jìn)行一個位移，那么我們需要給當(dāng)前元素設(shè)置一個position，例如：position: absolute
//opacity:'0.4',
// height:'180px',
//width:'180'
width:'toggle'
},3000)
})
$('.button_12').click(function(){
$('.box5').stop(true) //停止動畫
})
})
</script>
<!-- 點擊隱藏 -->
</head>
<body>
<div class="header">
<div class="header_1">
<button class="button_1">點擊隱藏</button>
<button class="button_2">點擊顯示</button>
<button class="button_3">下滑顯示</button>
<button class="button_4">上滑隱藏</button>
<button class="button_5">顯示隱藏切換</button>
</div>
<div class="content">
<p class="p_1">外湖蓮子長參差，霽山青處鷗飛。水天溶漾畫橈遲，人影鑒中移。</p>
<p class="p_1">桃葉淺聲雙唱，杏紅深色輕衣。小荷障面避斜暉，分得翠陰歸。</p>
</div>
<hr>
<div class="content">
<p class="p_2">一夜冰澌滿玉壺。五更喜氣動洪爐。</p>
<p class="p_2">門前桃李知麟集，庭下芝蘭看鯉趨。</p>
<p class="p_2">泉脈動，草心蘇。日長添得繡工夫。</p>
<p class="p_2">試詢補(bǔ)袞彌縫手，真?zhèn)€曾添一線無。</p>
</div>
<hr>
<div class="content">
<p class="p_3">一夜冰澌滿玉壺。五更喜氣動洪爐。</p>
<p class="p_3">門前桃李知麟集，庭下芝蘭看鯉趨。</p>
<p class="p_3">泉脈動，草心蘇。日長添得繡工夫。</p>
<p class="p_3">試詢補(bǔ)袞彌縫手，真?zhèn)€曾添一線無。</p>
</div>
<hr>
<div class="header_1">
<div class="header_1_a">
<button class="button_6">淡入</button>
<div class="box1"></div>
</div>
<div class="header_1_a">
<button class="button_7">淡出</button>
<div class="box2"></div>
</div>
<div class="header_1_a">
<button class="button_8">切換</button>
<div class="box3"></div>
</div>
<div class="header_1_a">
<button class="button_9">淡出到指定值</button>
<div class="box4"></div>
</div>
</div>
<div class="clear"></div>
<hr>
<div class="header_1">
<button class="button_10">點擊字體放大</button>
</div>
<div class="header_1_b">
<p class="p_4">JQ中我們使用 animate()方法創(chuàng)建自定義的動畫效果</p>
</div>
<hr>
<div class="header_1">
<button class="button_11">點擊移動DIV</button>
<button class="button_12">停止</button>
</div>
<div class="header_1_b">
<div class="box5"></div>
</div>
</div>
</body>
</html>
Professeur correcteur：滅絕師太Temps de correction：2019-03-19 09:26:52
Résumé du professeur：練習(xí)的比較全面,完成的很好,好的學(xué)習(xí)習(xí)慣繼續(xù)保持!