stop

JsAaron · JsAaron · commit 7072763e4da9 · 2015-10-23T08:54:46.000+08:00
diff --git a/慕课网教程案例/jQuery入门教程/自定义动画/stop.html b/慕课网教程案例/jQuery入门教程/自定义动画/stop.html
@@ -5,42 +5,66 @@
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <title></title>
     <style>
+    p {
+        color: red;
+    }
+    
     div {
-        position: absolute;
-        background-color: #abc;
-        left: 0px;
-        top: 30px;
-        width: 60px;
-        height: 60px;
-        margin: 5px;
+        width: 200px;
+        height: 100px;
+        background-color: yellow;
+        color: red;
+    }
+    a{
+        display: block
     }
     </style>
     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
 </head>
 
 <body>
-    <button id="go">Go</button>
-    <button id="stop">STOP!</button>
-    <button id="back">Back</button>
-    <div class="block"></div>
+    <h2>stop</h2>
+    <p>慕课网,专注分享</p>
+    <div id="aaron">内部动画</div>
+    <input id="exec" type="button" value="执行动画"><br /><br />
+
+    点击观察动画效果：
+    <select id="animation">
+        <option value="1">stop()</option>
+        <option value="2">stop(true)</option>
+        <option value="3">stop(true,true)</option>
+    </select>
+    <a></a>
+    <input id="stop" type="button" value="停止动画">
     <script type="text/javascript">
-    /* Start animation */
-    $("#go").click(function() {
-        $(".block").animate({
-            left: '+=100px'
-        }, 2000);
-    });
 
-    /* Stop animation when button is clicked */
-    $("#stop").click(function() {
-        $(".block").stop();
-    });
+    //点击执行动画
+    $("#exec").click(function(){
+        $("#aaron").animate({
+            height: 300
+        }, 5000)
+        $("#aaron").animate({
+            width: 300
+        }, 5000)
+        $("#aaron").animate({
+            opacity: 0.6
+        }, 2000)
+    })
 
-    /* Start animation in the opposite direction */
-    $("#back").click(function() {
-        $(".block").animate({
-            left: '-=100px'
-        }, 2000);
+
+    $("#stop").click(function() {
+        var v = $("#animation").val();
+        var $aaron = $("#aaron");
+        if (v == "1") {
+            //当前当前动画
+            $aaron.stop()
+        } else if (v == "2") {
+            //停止所以队列
+            $aaron.stop(true)
+        } else if (v == "3") {
+            //停止动画，直接跳到当前动画的结束
+            $aaron.stop(true,true)
+        } 
     });
     </script>
 </body>
