jquery中的动画
自带动画函数
show()方法和hide()方法
调用show()函数会将该元素的display属性设置为none，将元素隐藏
调用hide()函数会将该元素的display样式设置为原来的值，将元素重新显示
Tip：
- 使用该方法时，元素的宽度/高度/透明度是同时变化的。
- 可以给该方法传递参数”fast”,”normal”,”slow”,或着之间填数字（单位是毫秒）控制元素消失/出现的速度。
示例程序：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery test</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> .one{ background-color:red; width: 300px; } .two{ background-color: green; width: 300px; display: none; } .three{ background-color:yellow; width: 300px; } </style> </head> <body> <div class="one"> 网上支付入口连接 </div> <div class="two"> 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 </div> <div class="three"> 本时钟仅供参考，不作为计费依据。 本时钟仅供参考，不作为计费依据。 本时钟仅供参考，不作为计费依据。 本时钟仅供参考，不作为计费依据。 </div> <script type="text/javascript"> $("div.one").bind("mouseover",function(){ $(this).next("div.two").show("slow"); }); $("div.one").bind("mouseout",function(){ $(this).next("div.two").hide("slow"); }) </script> </body> </html>
fadeIn()和fadeOut()方法
fadeIn()表示淡入，fadeOut()表示淡出。该函数通过控制元素的透明度来控制元素的隐藏和出现。同样可以通过传递参数的方法控制其速度。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery test</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> .one{ background-color:red; width: 300px; } .two{ background-color: green; width: 300px; display: none; } .three{ background-color:yellow; width: 300px; } </style> </head> <body> <div class="one"> 网上支付入口连接 </div> <div class="two"> 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 </div> <div class="three"> 本时钟仅供参考，不作为计费依据。 本时钟仅供参考，不作为计费依据。 本时钟仅供参考，不作为计费依据。 本时钟仅供参考，不作为计费依据。 </div> <script type="text/javascript"> $("div.one").bind("mouseover",function(){ $(this).next("div.two").fadeIn("slow"); }); $("div.one").bind("mouseout",function(){ $(this).next("div.two").fadeOut("slow"); }) </script> </body> </html>
slideDown()和slideUP()方法
slideDown()表示元素从上到下滑下出现，slideUp()表示元素从下到上滑上消失，很像我们生活中遇到的卷帘。该函数是通过控制元素的高度来实现的元素的消失和出现。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery test</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> .one{ background-color:red; width: 300px; } .two{ background-color: green; width: 300px; display: none; } .three{ background-color:yellow; width: 300px; } </style> </head> <body> <div class="one"> 网上支付入口连接 </div> <div class="two"> 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 您已经建立了宽带上网的连接。 如果您想继续使用宽带上网的功能，请不要关闭本窗口. 如果您想断开连接，请单击<下线>按钮。 </div> <div class="three"> 本时钟仅供参考，不作为计费依据。 本时钟仅供参考，不作为计费依据。 本时钟仅供参考，不作为计费依据。 本时钟仅供参考，不作为计费依据。 </div> <script type="text/javascript"> $("div.one").bind("mouseover",function(){ $(this).next("div.two").slideDown("slow"); }); $("div.one").bind("mouseout",function(){ $(this).next("div.two").slideUp("slow"); }) </script> </body> </html>
自定义动画函数
animate(paras , speed , callback);
这三个参数分别是：包含目标样式属性的映射，速度参数（可选），在动画完成时执行的动作（可选）
自定义简单动画：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery test</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> .one{ position: relative; width: 300px; height: 300px; background-color:red; cursor: pointer; } </style> </head> <body> <div class="one"> 网上支付入口连接 </div> <script type="text/javascript"> $("div.one").click(function(){ $(this).animate({left:($(document.body).width()-$(this).width())},3000); }); </script> </body> </html>
上面的代码演示的是：当用户点击div以后，该div就会从页面的左边移动到右边。
同时执行多个动画：
其实就是在第一个参数设置不止一个属性，让元素的多个属性同时变化。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery test</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> .one{ position: relative; width: 300px; height: 300px; background-color:red; cursor: pointer; } </style> </head> <body> <div class="one"> 网上支付入口连接 </div> <script type="text/javascript"> $("div.one").click(function(){ $(this).animate({left:($(document.body).width()-$(this).width()),height:"500px",opacity:"0.5"},3000); }); </script> </body> </html>
上面的代码演示的是：当用户点击div之后，该div的位置，高度，透明度将会同时变化。
按照顺序依次执行动画:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery test</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> .one{ position: relative; width: 300px; height: 300px; background-color:red; cursor: pointer; } </style> </head> <body> <div class="one"> 网上支付入口连接 </div> <script type="text/javascript"> $("div.one").click(function(){ $(this).animate({left:($(document.body).width()-$(this).width())},3000) .animate({height:"500px"},3000) .animate({opacity:"0.5"},3000); }); </script> </body> </html>
上面的代码演示结果与上一个例子的最终结果是一样的，但是div的位置，高度，透明度三个属性的变化不是同时发生，而是依次变化的，并且每一个动作都耗时3000毫秒，一共用时9000毫秒。
动画回调函数：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery test</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> .one{ position: relative; width: 300px; height: 300px; background-color:red; cursor: pointer; } .two{ font-size: 30px; color: green; text-decoration: underline; } </style> </head> <body> <div class="one"> 网上支付入口连接 </div> <script type="text/javascript"> function fun(){ var $content = $("<ul><li>test one</li><li>test two</li><li>test three</li></ul>"); var $target = $("div.one"); $target.append($content).addClass("two"); } $("div.one").click(function(){ $(this).animate({left:($(document.body).width()-$(this).width())},3000) .animate({height:"500px"},3000) .animate({opacity:"0.5"},3000,function(){ fun(); }); }); </script> </body> </html>
动画回掉函数的作用是将函数插入动画队列，而不是在动画的一开始就执行。
上面代码中的fun函数就是在动画队列中的第三个动画执行结束之后，再执行的。
