JQuery动画停止小节
通过本小节的学习知道jQuery所有的动画都可以运行当中停止的，使用stop（）方法，有两个参数1.stopAll：值有true和false默认为false，当为true时，使用stop（）方法会停止所有的动画包括之后的动画队列，false只会停止当前执行的动画，后续队列动画还是会执行的，2.gotoEnd：值同样有两个true和false 默认为false，值为true时用stop（）方法，会直接停止在动画结束的位置false则直接停止到当前移动的位置；
以下为学习本章后做的动画小结：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery动画小结</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(){
//向上滑入即隐藏掉滑入结束时间1000ms
$('.box1').slideUp(1000);
})
$('.bt2').click(function(){
//向下滑入即显示掉滑入结束时间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>