サマリー：第一章 jQuery顯示/隱藏 hide() 隱藏顯示的元素 書(shū)寫(xiě)格式：hide([speed][sesing] [fn]) show() 顯示隱藏的元素 書(shū)寫(xiě)格式：show([speed][sesing] [fn]) speed:顯示過(guò)程的速度 速
第一章 jQuery顯示/隱藏
hide() 隱藏顯示的元素
書(shū)寫(xiě)格式：hide([speed][sesing] [fn])
show() 顯示隱藏的元素
書(shū)寫(xiě)格式：show([speed][sesing] [fn])
speed:顯示過(guò)程的速度 速度是毫秒值
sesing:指定切換的效果
fn:動(dòng)畫(huà)完成時(shí)執(zhí)行的一個(gè)函數(shù)
<!DOCTYPE html>
<html>
<head>
<title>jQuery顯示/隱藏</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div,p{width: 200px;height: 200px;background: red;margin: 10px 0;color: #fff;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#bt1').click(function(){
$('p').hide('2000')
})
$('#bt2').click(function(){
$('p').show('2000')
})
})
</script>
</body>
<button id="bt1">點(diǎn)擊隱藏</button>
<button id="bt2">點(diǎn)擊顯示</button>
<!-- <div></div> -->
<p>紅玫瑰與白玫瑰</p>
<p>朱砂痣與白月光</p>
</html>第二章 jQuery的滑動(dòng)
jQuery的滑動(dòng)是通過(guò)高度的變化（向某個(gè)方向增大或者縮?。﹣?lái)動(dòng)態(tài)的顯示所匹配的元素
slideDown([speed] [fn])通過(guò)高度的變化，向下增大的動(dòng)態(tài)效果 下滑效果
speed:下滑顯示過(guò)程的速度 英文值或者毫秒
fn:動(dòng)畫(huà)完成時(shí)執(zhí)行是函數(shù)
<!DOCTYPE html>
<html>
<head>
<title>jQuery滑動(dòng)</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.p1').hide()
$('.bt1').click(function(){
$('.p1').slideDown(777)
})
$('.bt2').click(function(){
$('.p2').slideUp(777)
})
$('.bt3').click(function(){
$('.p3').slideToggle(777)
})
})
</script>
<button class="bt1">下滑</button>
<p class="p1">With this hand</p>
<p class="p1">I'll left from sorrows</p>
<p class="p1">Your cup will never empty</p><br>
<button class="bt2">上滑</button>
<p class="p2">You'll be fine</p>
<p class="p2">Don't worry</p>
<p class="p2">you will be fine</p><br>
<button class="bt3">切換</button>
<p class="p3">For I will be your wine</p>
<p class="p3">With this candle</p>
<p class="p3">I'll ligth your darkness</p>
</body>
</html>slideUp([speed] [fn]) 通過(guò)高度的變化，向上減小的動(dòng)態(tài)效果 上滑效果
speed:上滑顯示過(guò)程的速度 英文值或者毫秒
fn:動(dòng)畫(huà)完成時(shí)執(zhí)行是函數(shù)
slideToggle([speed] [fn])通過(guò)高度的變化來(lái)切換元素的可見(jiàn)性
speed:上滑隱藏/下滑顯示 過(guò)程的速度 英文值或者毫秒
fn:動(dòng)畫(huà)完成時(shí)執(zhí)行是函數(shù)
第三章 jQuery淡入淡出
jQuery是通過(guò)控制不透明度的變化來(lái)控制匹配到的元素的淡入淡出效果
fadeIn([speed] [fn]) 通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)匹配到元素的淡入的效果;
fadeOut([speed] [fn])通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)匹配到元素的淡出的效果;
fadeToggle([speed] [fn]) 通過(guò)不透明度的變化來(lái)開(kāi)關(guān)所有匹配元素的淡入淡出效果;
fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以漸進(jìn)發(fā)方式調(diào)整到指定的不透明度;
// speed:規(guī)定效果的時(shí)長(zhǎng)
fn:動(dòng)畫(huà)完成時(shí)執(zhí)行是函數(shù)
opacity：fadeTo()方法中必須參數(shù)，控制淡入淡出的效果的不透明度（值介于0與1之間）
<!DOCTYPE html>
<html>
<head>
<title>jQuery淡入淡出</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
.main{height: 240px;width: 200px;margin-right: 20px;float: left;}
.box1{height: 200px;width: 200px;background: yellowgreen;}
.box2{height: 200px;width: 200px;background: pink;}
.box3{height: 200px;width: 200px;background: blue;}
.box4{height: 200px;width: 200px;background: red;}
button{height: 40px;width: 200px;border:none;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.box1').hide()
$('.bt1').click(function(){
$('.box1').fadeIn(777)
})
$('.bt2').click(function(){
$('.box2').fadeOut(777)
})
$('.bt3').click(function(){
$('.box3').fadeToggle(777)
})
$('.bt4').click(function(){
$('.box4').fadeTo(777,0.5)
})
})
</script>
<div class="main">
<button class="bt1">淡入</button>
<div class="box1"></div><br>
</div>
<div class="main">
<button class="bt2">淡出</button>
<div class="box2"></div><br>
</div>
<div class="main">
<button class="bt3">切換</button>
<div class="box3"></div><br>
</div>
<div class="main">
<button class="bt4">切換</button>
<div class="box4"></div><br>
</div>
</body>
</html>
第四章 自定義動(dòng)畫(huà)
jQuery中我們使用 animate()方法創(chuàng)建自定義的動(dòng)畫(huà)
語(yǔ)法:$(selector).animate({params},speed,fn);
必需的 params 參數(shù)定義形成動(dòng)畫(huà)的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
可選的 fn是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)
<!DOCTYPE html>
<html>
<head>
<title>jQuery自定義動(dòng)畫(huà)</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background: yellowgreen;position: absolute;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#bt1').click(function(){
$('em').animate({fontSize:'37px'},1777)
})
$('#bt2').click(function(){
$('div').animate({
left:'377',
opacity:'0.77',
width:'toggle',
height:'toggle'
},1777)
})
})
</script>
<button id="bt1">點(diǎn)擊字體放大</button><br>
<em style="color:red">可口可樂(lè)</em><br>
<button id="bt2">點(diǎn)擊移動(dòng)div</button>
<div></div>
</body>
</html>停止動(dòng)畫(huà)：
stop() 方法用于停止動(dòng)畫(huà)或效果，在它們完成之前； 該方法適用于所有 jQuery 效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫(huà)
語(yǔ)法:
$(selector).stop(stopAll,goToEnd)
可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列。默認(rèn)是 false 僅停止活動(dòng)的動(dòng)畫(huà)，允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行
可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動(dòng)畫(huà)。默認(rèn)是 false
默認(rèn)情況下 stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫(huà)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
.box1{position: absolute;background-color: pink;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#right').click(function(){
$('.box1').animate({
left:'600px',
fontSize:'37px',
fontWeight:'bold'
},2777)
})
$('#stop').click(function(){
$('.box1').stop()
})
})
</script>
</body>
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="box1">XXXTENTACION</div>
</html>
添削の先生：韋小寶添削時(shí)間：2019-01-23 11:42:09
先生のまとめ：寫(xiě)的很棒 總結(jié)注釋的都很清楚 jQuery中可以實(shí)現(xiàn)很多的動(dòng)畫(huà)效果 課后沒(méi)事多練習(xí)練習(xí) 繼續(xù)加油吧