码迷,mamicode.com
首页 > Web开发 > 详细

第十一节 jQuery特殊效果

时间:2020-03-14 18:24:17      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:显示   document   可见   meta   alert   height   set   title   char   

 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>

 

第十一节 jQuery特殊效果

标签:显示   document   可见   meta   alert   height   set   title   char   

原文地址:https://www.cnblogs.com/kogmaw/p/12493188.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!