第十一节 jQuery特殊效果

 1 <!-- fadeIn() 淡入
 2      fadeOut() 淡出
 3      fadeToggle() 切换淡入淡出
 4 
 5      hide() 隐藏元素
 6      show() 显示元素
 7      toggle() 切换元素的可见状态
 8 
 9      slideDown() 向下展开
10      slideUp() 向上卷起
11      slideToggle() 依次展开或者卷起某个元素 -->
12 
13 <!DOCTYPE html>
14 <html lang="en">
15 <head>
16     <meta charset="UTF-8">
17     <title>Document</title>
18     <style type="text/css">
19         .box{
20             height: 300px;
21             width: 300px;
22             background-color: gold;
23             margin: 50px auto 0;
24         }
25         #btd{
26             border: o;
27             text-align: center;
28         }
29     </style>
30     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
31     <script type="text/javascript">
32         $(function(){
33             var $btn = $("#btn");
34             $btn.click(function(){
35                 // $('.box').fadeOut();
36 
37                 // $('.box').fadeOut(2000,'swing',function(){
38                 //     alert('动画');
39                 // });
40                 
41                 // $('.box').fadeToggle(2000,'swing',function(){
42                 //     alert('动画');
43                 // });
44 
45                 // $(".box").hide();
46                 // $(".box").show();
47                 // $('.box').toggle();
48                 
49                 $('.box').slideToggle(2000);
50             });
51         });
52     </script>
53 </head>
54 <body>
55     <input type="button" name="" value="动画" id="btn">
56     <div class="box"></div>
57 </body>
58 </html>