【学亮IT手记】jQuery callback方法实例 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8     $(document).ready(function(){
 9       $("button").click(function(){
10         $("p").hide("slow",function(){
11           alert("段落现在被隐藏了");
12         });
13       });
14     });
15 </script>
16 </head>
17 <body>
18 <button>隐藏</button>
19 <p>我们段落内容，点击“隐藏”按钮我就会消失</p>
20 </body>
21 </html>

对比没有callback的效果：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(document).ready(function(){
 9   $("button").click(function(){
10     $("p").hide(1000);
11     alert("现在段落被隐藏了");
12   });
13 });
14 </script>
15 </head>
16 <body>
17 <button>隐藏</button>
18 <p>这是一个段落，内容很少</p>
19 </body>
20 </html>

 

posted @ 2018-08-11 12:29  学亮编程手记  阅读(159)  评论(0)  编辑  收藏  举报