update

JsAaron · JsAaron · commit b92b4e634541 · 2016-02-24T14:48:08.000+08:00
diff --git a/慕课网教程案例/jQuery入门教程/上卷下拉效果/slideDown.html b/慕课网教程案例/jQuery入门教程/上卷下拉效果/slideDown.html
@@ -7,15 +7,14 @@
     <style>
     .left div,
     .right div {
-        width: 500px;
+        width: 100%;
         height: 50px;
         padding: 5px;
         margin: 5px;
         float: left;
         border: 1px solid #ccc;
         display: none;
     }
-    
     .left div {
         background: #bbffaa;
     }
@@ -24,24 +23,38 @@
         background: yellow;
     }
     </style>
-    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
+    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
 </head>
 
 <body>
     <h2>slideDown</h2>
     <div class="left">
+        <h4>测试一</h4>
         <div id="a1">hide-show</div>
         <button>点击slideDown显示动画</button>
         <script type="text/javascript">
         //点击buttom
         //执行3秒隐藏
         //执行3秒显示
-        $("button").click(function() {
+        $("button:first").click(function() {
             $("#a1").slideDown(3000)
         });
+        </script>
 
-
+        <h4>测试二</h4>
+        <div id="a2">hide-show</div>
+        <button>点击slideDown执行回调</button>
+        <script type="text/javascript">
+        //点击buttom
+        //执行3秒隐藏
+        //执行3秒显示
+        $("button:last").click(function() {
+            $("#a2").slideDown(3000,function(){
+                alert('动画执行结束')
+            })
+        });
         </script>
 </body>
 
+
 </html>
diff --git a/慕课网教程案例/jQuery入门教程/上卷下拉效果/slideUp.html b/慕课网教程案例/jQuery入门教程/上卷下拉效果/slideUp.html
@@ -7,7 +7,7 @@
     <style>
     .left div,
     .right div {
-        width: 500px;
+        width: 100%;
         height: 50px;
         padding: 5px;
         margin: 5px;
@@ -29,18 +29,32 @@
 <body>
     <h2>slideUp</h2>
     <div class="left">
+        <h4>测试一</h4>
         <div id="a1"></div>
         <button>点击slideUp隐藏动画</button>
         <script type="text/javascript">
         //点击buttom
         //执行3秒隐藏
         //执行3秒显示
-        $("button").click(function() {
+        $("button:first").click(function() {
             $("#a1").slideUp(3000)
         });
+        </script>
 
-
+        <h4>测试二</h4>
+        <div id="a2"></div>
+        <button>点击slideUp执行回调</button>
+        <script type="text/javascript">
+        //点击buttom
+        //执行3秒隐藏
+        //执行3秒显示
+        $("button:last").click(function() {
+            $("#a2").slideUp(3000,function(){
+                alert('动画执行结束')
+            })
+        });
         </script>
+
 </body>
 
 </html>
diff --git a/慕课网教程案例/jQuery入门教程/动画基础隐藏和显示/hide.html b/慕课网教程案例/jQuery入门教程/动画基础隐藏和显示/hide.html
@@ -7,7 +7,7 @@
     <style>
     .left div,
     .right div {
-        width: 500px;
+        width: 100%;
         height: 50px;
         padding: 5px;
         margin: 5px;
@@ -29,33 +29,32 @@
 <body>
     <h2>hide</h2>
     <div class="left">
-    
+        <h4>测试一</h4>
         <div id="a1">hide操作</div>
+        <button>直接hide</button>
+        <script type="text/javascript">
+        //点击buttom1 直接隐藏
+        $("button:first").click(function() {
+            $("#a1").hide()
+        });
+        </script>
 
-        <div id="a2">hide动画操作</div>
 
-        <button>直接hide</button>
+        <h4>测试一</h4>
+        <div id="a2">hide动画操作</div>
         <button>hide带动画</button>
+        <script type="text/javascript">
+        //点击buttom2 执行动画隐藏
+        $("button:last").click(function() {
+            $("#a2").hide({
+                duration: 3000,
+                complete: function() {
+                    alert('执行3000ms动画完毕')
+                }
+            })
+        });
+        </script>
     </div>
-    <script type="text/javascript">
-
-    //点击buttom1 直接隐藏
-    $("button:first").click(function() {
-        $("#a1").hide()
-    });
-
-    //点击buttom2 执行动画隐藏
-    $("button:last").click(function() {
-         $("#a2").hide({
-            duration:3000,
-            complete:function(){
-                alert('执行3000ms动画完毕')
-            }
-         })
-    });
-
-
-    </script>
 </body>
 
 </html>
