5-3 jQuery中停止动画stop
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery中停止动画stop

动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止

语法：

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

stop还有几个可选的参数，简单来说可以这3种情况

简单的说：参考下面代码、

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)
  1. stop()：只会停止第一个动画，第二个第三个继续
  2. stop(true)：停止第一个、第二个和第三个动画
  3. stop(true ture)：停止动画，直接跳到第一个动画的最终状态 

任务

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     p {
  9.         color: red;
  10.     }
  11.  
  12.     div {
  13.         width: 200px;
  14.         height: 100px;
  15.         background-color: yellow;
  16.         color: red;
  17.     }
  18.     a{
  19.         display: block
  20.     }
  21.     </style>
  22.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  23. </head>
  24.  
  25. <body>
  26.     <h2>stop</h2>
  27.     <p>慕课网,专注分享</p>
  28.     <div id="aaron">内部动画</div>
  29.     <input id="exec" type="button" value="执行动画"><br /><br />
  30.  
  31.     点击观察动画效果：
  32.     <select id="animation">
  33.         <option value="1">stop()</option>
  34.         <option value="2">stop(true)</option>
  35.         <option value="3">stop(true,true)</option>
  36.     </select>
  37.     <a></a>
  38.     <input id="stop" type="button" value="停止动画">
  39.     <script type="text/javascript">
  40.  
  41.     //点击执行动画
  42.     $("#exec").click(function(){
  43.         $("#aaron").animate({
  44.             height: 300
  45.         }, 5000)
  46.         $("#aaron").animate({
  47.             width: 300
  48.         }, 5000)
  49.         $("#aaron").animate({
  50.             opacity: 0.6
  51.         }, 2000)
  52.     })
  53.  
  54.  
  55.     $("#stop").click(function() {
  56.         var v = $("#animation").val();
  57.         var $aaron = $("#aaron");
  58.         if (v == "1") {
  59.             //当前当前动画
  60.             $aaron.stop()
  61.         } else if (v == "2") {
  62.             //停止所以队列
  63.             $aaron.stop(true)
  64.         } else if (v == "3") {
  65.             //停止动画，直接跳到当前动画的结束
  66.             $aaron.stop(true,true)
  67.         } 
  68.     });
  69.     </script>
  70. </body>
  71.  
  72. </html>
  73.  
下一节