サマリー： 通過本小節(jié)的學(xué)習(xí)知道jQuery所有的動(dòng)畫都可以運(yùn)行當(dāng)中停止的，使用stop（）方法，有兩個(gè)參數(shù)1.stopAll：值有true和false默認(rèn)為false，當(dāng)為true時(shí)，使用stop（）方法會(huì)停止所有的動(dòng)畫包括之后的動(dòng)畫隊(duì)列，false只會(huì)停止當(dāng)前執(zhí)行的動(dòng)畫，后續(xù)隊(duì)列動(dòng)畫還是會(huì)執(zhí)行的，2.gotoEnd：值同樣有兩個(gè)true和false 默認(rèn)為false，值為tru
通過本小節(jié)的學(xué)習(xí)知道jQuery所有的動(dòng)畫都可以運(yùn)行當(dāng)中停止的，使用stop（）方法，有兩個(gè)參數(shù)1.stopAll：值有true和false默認(rèn)為false，當(dāng)為true時(shí)，使用stop（）方法會(huì)停止所有的動(dòng)畫包括之后的動(dòng)畫隊(duì)列，false只會(huì)停止當(dāng)前執(zhí)行的動(dòng)畫，后續(xù)隊(duì)列動(dòng)畫還是會(huì)執(zhí)行的，2.gotoEnd：值同樣有兩個(gè)true和false 默認(rèn)為false，值為true時(shí)用stop（）方法，會(huì)直接停止在動(dòng)畫結(jié)束的位置false則直接停止到當(dāng)前移動(dòng)的位置；
以下為學(xué)習(xí)本章后做的動(dòng)畫小結(jié)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery動(dòng)畫小結(jié)</title>
<link rel="shortcut icon" type="image/x-icon" href="../picture/mi.png">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.box{border: 1px solid pink;height: 260px;}
.clear{clear: both;}
.box1,.box2,.box3{width: 227px;height: 130px;background: url(../picture/tiger.jpg);margin-top: 10px;margin-left: 110px;float: left;/*display: none;*/}
.bt1,.bt2,.bt3{/*margin-left: 0px;*/margin-top: 10px;border: 1px solid pink;border-radius:3px;width: 200px;height: 30px;}
.bt4,.bt5,.bt6,.bt7{/*margin-left: 0px;*/margin-top: 5px;border: 1px solid pink;border-radius:3px;width: 180px;height: 30px;}
.bt8,.bt9,.bt10{/*margin-left: 0px;*/margin-top: 5px;border: 1px solid pink;border-radius:3px;width: 180px;height: 30px;}
</style>
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<input type="button" value="點(diǎn)擊上滑(Up)">
<input type="button" value="點(diǎn)擊下滑(Down)">
<input type="button" value="點(diǎn)擊切換(上滑下滑Toggle)"><br>
<input type="button" value="點(diǎn)擊淡入(In)">
<input type="button" value="點(diǎn)擊淡出(Out)">
<input type="button" value="點(diǎn)擊控制透明度(To)">
<input type="button" value="點(diǎn)擊切換(淡入淡出Toggle)"><br>
<input type="button" value="點(diǎn)擊變大(big)">
<input type="button" value="點(diǎn)擊向右移動(dòng)(right)">
<input type="button" value="點(diǎn)擊停止(stop)">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.bt1').click(function(){
//向上滑入即隱藏掉滑入結(jié)束時(shí)間1000ms
$('.box1').slideUp(1000);
})
$('.bt2').click(function(){
//向下滑入即顯示掉滑入結(jié)束時(shí)間1000ms
$('.box1').slideDown(1000);
})
$('.bt3').click(function(){
//向下滑入向上滑入的切換即顯示和隱藏每次切換用時(shí)1000ms
$('.box1').slideToggle(1000);
})
$('.bt4').click(function(){
//淡入即顯示動(dòng)畫用時(shí)1000ms
$('.box2').fadeIn(1000);
})
$('.bt5').click(function(){
//淡出即顯示動(dòng)畫用時(shí)1000ms
$('.box2').fadeOut();
})
$('.bt6').click(function(){
//淡入0.3控制淡入的透明度
$('.box2').fadeTo(1000,1);
})
$('.bt7').click(function(){
//淡入淡出之間切換，每次切換用時(shí)1000ms
$('.box2').fadeToggle(1000);
})
$('.bt8').click(function(){
$('.box3').animate({
width:'360px',
height:'300px'
},1500);
})
$('.bt9').click(function(){
$('.box3').animate({
left:'200px'},1500)
})
$('.bt10').click(function(){
$('.box3').stop();
})
})
</script>
</body>
</html>
添削の先生：天蓬老師添削時(shí)間：2018-12-12 12:06:14
先生のまとめ：jQuery的動(dòng)畫功能之強(qiáng)大,幾乎可以完成任何一種特效