jQuery动画

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery动画相关的知识，希望对你有一定的参考价值。

show()：

　　显示元素。

hide()：

　　隐藏元素。

show()和hide()方法从元素的宽度、高度和不透明度出发，实现动画效果

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 7 <style type="text/css">
 8 #header ul li{
 9     display:inline;
10     border:1px solid #f00;
11     padding: 5px;
12     margin-left:-9px;
13 }
14 .content{
15     display:none;
16 }
17 </style>
18 <script type="text/javascript">
19     $(function(){
20         $("#header li").click(function(){
21             $("#content > .content").hide();
22             var index = $(this).prevAll().length;
23             $("#content > .content:eq("+index+")").show();
24         });
25         $(".content:first").show();
26     });
27 </script>
28 </head>
29 <body>
30     <div id="header">
31         <ul>
32             <li>First</li>
33             <li>Second</li>
34         </ul>
35     </div>
36     <div id="content">
37         <div class="content">
38             first div.
39         </div>
40         <div class="content">
41             second div.
42         </div>
43     </div>
44 </body>
45 </html>

fadeIn()：

　　淡入效果。

fadeOut()：

　　淡出效果。

fadeIn()和fadeOut()从元素的不透明度出发，实现动画效果。

 1 <script type="text/javascript">
 2     $(function(){
 3         $("#header li").click(function(){
 4             $("#content > .content").fadeOut();
 5             var index = $(this).prevAll().length;
 6             $("#content > .content:eq("+index+")").fadeIn();
 7         });
 8         $(".content:first").fadeIn();
 9     });
10 </script>

slideUp()：

　　由下至上隐藏元素。

slideDown()：

　　由上至下显示元素。

slideUp()和slideDown()从元素的高度出发，实现动画效果。

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         $(".content").slideDown();
10     });
11 </script>
12 </head>
13 <body>
14     <div class="content" style="display:none;">2015年11月24日至26日，中央军委改革工作会议在北京举行。在发表重要讲时说，深化国防和军队改革是实现中国梦、强军梦的时代要求，是强军兴军的必由之路，也是决定军队未来的关键一招。要深入贯彻党在新形势下的强军目标，动员全军和各方面力量，坚定信心、凝聚意志，统一思想、统一行动，全面实施改革强军战略，坚定不移走中国特色强军之路。</div>
15 </body>
16 </html>

animate()：

　　自定义动画效果。

　　参数：

params：一个包含样式属性及值的映射。
speed：速度参数。
callback：在动画完成时执行的函数。

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 7 <style type="text/css">
 8 #panel{
 9     position:relative;
10     width:100px;
11     height:100px;
12     border:1px solid #005000;
13     background:#96E555;
14     cursor:pointer;
15 }
16 </style>
17 <script type="text/javascript">
18     $(function(){
19         $("#panel").click(function(){
20             $(this).animate({left:"500px"},3000);
21         });
22     });
23 </script>
24 </head>
25 <body>
26     <div id="panel"></div>
27 </body>
28 </html>