第十一节 jQuery特殊效果

Posted kogmaw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第十一节 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>

 

以上是关于第十一节 jQuery特殊效果的主要内容,如果未能解决你的问题,请参考以下文章

学习vue第十一节,使用使用其他动画库完成vue动画效果

第十一节课 课堂总结

第十一节,全连接网络中的优化技巧-正则化,dropout等

第十一节:Latex中数学公式中的多行公式

第十一节 双端队列的概念和python代码实现

《树莓派项目实战》第十一节 学会使用舵机