摘要： 通過本小節(jié)的學習知道jQuery所有的動畫都可以運行當中停止的，使用stop（）方法，有兩個參數(shù)1.stopAll：值有true和false默認為false，當為true時，使用stop（）方法會停止所有的動畫包括之后的動畫隊列，false只會停止當前執(zhí)行的動畫，后續(xù)隊列動畫還是會執(zhí)行的，2.gotoEnd：值同樣有兩個true和false 默認為false，值為tru
通過本小節(jié)的學習知道jQuery所有的動畫都可以運行當中停止的，使用stop（）方法，有兩個參數(shù)1.stopAll：值有true和false默認為false，當為true時，使用stop（）方法會停止所有的動畫包括之后的動畫隊列，false只會停止當前執(zhí)行的動畫，后續(xù)隊列動畫還是會執(zhí)行的，2.gotoEnd：值同樣有兩個true和false 默認為false，值為true時用stop（）方法，會直接停止在動畫結(jié)束的位置false則直接停止到當前移動的位置；
以下為學習本章后做的動畫小結(jié)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery動畫小結(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="點擊上滑(Up)">
<input type="button" value="點擊下滑(Down)">
<input type="button" value="點擊切換(上滑下滑Toggle)"><br>
<input type="button" value="點擊淡入(In)">
<input type="button" value="點擊淡出(Out)">
<input type="button" value="點擊控制透明度(To)">
<input type="button" value="點擊切換(淡入淡出Toggle)"><br>
<input type="button" value="點擊變大(big)">
<input type="button" value="點擊向右移動(right)">
<input type="button" value="點擊停止(stop)">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.bt1').click(function(){
//向上滑入即隱藏掉滑入結(jié)束時間1000ms
$('.box1').slideUp(1000);
})
$('.bt2').click(function(){
//向下滑入即顯示掉滑入結(jié)束時間1000ms
$('.box1').slideDown(1000);
})
$('.bt3').click(function(){
//向下滑入向上滑入的切換即顯示和隱藏每次切換用時1000ms
$('.box1').slideToggle(1000);
})
$('.bt4').click(function(){
//淡入即顯示動畫用時1000ms
$('.box2').fadeIn(1000);
})
$('.bt5').click(function(){
//淡出即顯示動畫用時1000ms
$('.box2').fadeOut();
})
$('.bt6').click(function(){
//淡入0.3控制淡入的透明度
$('.box2').fadeTo(1000,1);
})
$('.bt7').click(function(){
//淡入淡出之間切換，每次切換用時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>
批改老師：天蓬老師批改時間：2018-12-12 12:06:14
老師總結(jié)：jQuery的動畫功能之強大,幾乎可以完成任何一種特效