标签：
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()：
自定义动画效果。
参数：
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>
stop()：
停止当前正在执行的动画。
参数：
$(element).is(":animated")：
判断元素是否处于动画状态。
delay()：
延迟动画操作。
toggle()：
元素状态切换。
slideToggle()：
通过高度变化来切换元素的可见性。
fadeTo()：
把元素的不透明度以渐进方式调整到指定的值。
fadeToggle()：
通过不透明度变化来切换元素的可见性。
标签：
原文地址：http://www.cnblogs.com/qhdxqxx/p/5189017.html
