标签：伦敦 span net back 教程 pad 动效 targe padding
众所周知，jQuery官方效果中有隐藏/显示，淡入淡出，以及上下滑动效果。
隐藏和显示HTML元素通过jQuery的hide()和show()方法来实现，比如这一段代码实现了简单的显示和隐藏效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script type="text/javascript"> 6 $(document).ready(function(){ 7 $("#hide").click(function(){ 8 $("p").hide(); 9 }); 10 $("#show").click(function(){ 11 $("p").show(); 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 <p id="p1">如果点击“隐藏”按钮，我就会消失。</p> 18 <button id="hide" type="button">隐藏</button> 19 <button id="show" type="button">显示</button> 20 </body> 21 </html>
淡入淡出的方法为：fadeIn() 用于淡入已隐藏的元素，fadeOut() 方法用于淡出可见元素。其语法分别为$(selector).fadeIn(speed,callback);和$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。以下代码演示了淡入效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 $("#div1").fadeIn(); 9 $("#div2").fadeIn("slow"); 10 $("#div3").fadeIn(3000); 11 }); 12 }); 13 </script> 14 </head> 15 16 <body> 17 <p>演示带有不同参数的 fadeIn() 方法。</p> 18 <button>点击这里，使三个矩形淡入</button> 19 <br><br> 20 <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div> 21 <br> 22 <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div> 23 <br> 24 <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> 25 </body> 26 </html>
而上下滑动有slideDown(),slideUp()和slideDown()方法，分别是向下，向上，上下滑动，其语法与淡入淡出比较相似：$(selector).slideDown(speed,callback)。此代码演示了slideDown方法
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html>
但是有些时候我们只有上下滑动效果是不够的，在近期的一个项目中，需要实现左右滑动的效果，而jQuery官方并没有提供这个左右滑动的效果，多方搜索找到了jQuery的aminate方法：http://www.w3school.com.cn/jquery/effect_animate.asp 通过这个方法可以定制一个自己想要的jQuery效果。经过多方比对，以下方法可以较好地实现左右滑动效果：
<html> <head> <title>slideLeft</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> jQuery.fn.slideLeftHide = function( speed, callback ) { this.animate({ width : "hide", paddingLeft : "hide", paddingRight : "hide", marginLeft : "hide", marginRight : "hide" }, speed, callback ); }; jQuery.fn.slideLeftShow = function( speed, callback ) { this.animate({ width : "show", paddingLeft : "show", paddingRight : "show", marginLeft : "show", marginRight : "show" }, speed, callback ); }; <!-- <script type="text/javascript"> --> function hide(){ $(".2").hide(); $(".2").slideLeftHide("slow"); document.getElementById("div1").style.width="100%"; } function show(){ $(".2").slideLeftShow("slow"); document.getElementById("div1").style.width="48%"; } window.onload=hide; </script> </head> <body> <div style="margin:20px 0;"> <button onclick="show()">show</button> <button onclick="hide()">hide</button> </div> <!--<div>--> <div class="1" style="float:left;width: 30%" id="div1"> <h1>div_1</h1> <div> <h2>32岁的亨利就坐在那里，深情的目光望过去，都是自己22岁的影子。 380场比赛，226个进球，4座英超金靴，2座英超奖杯，49场不败，历史最佳射手，海布里的最后一战，海布里的最后一吻。 当烟花升起的时候，那个曾属于亨利的海布里国王时代不会随年华逝去，而只会在年华的飘零中常常记起。</h2> </div> <div> <img src="http://i0.sinaimg.cn/ty/g/pl/2014-10-04/U10994P6T12D7358443F44DT20141004124015.jpg"> <img src="http://i0.sinaimg.cn/ty/g/pl/2014-10-04/U10994P6T12D7358443F44DT20141004124015.jpg"> </div> </div> <div class="2" style="float:right;width:48%" id="div2"> <h1>div_2 </h1> <h2>还是回到伦敦吧，通往海布里的快车一趟一趟的运行着。这里面总会走过客，迎来新生。 06年5月7日，即将送走的过客正是93岁的枪手圣地-海布里。队长亨利上演帽子戏法为这座拥有无限辉煌的球场告别。</h2> <img src="http://photocdn.sohu.com/20051107/Img227415098.jpg" border="0"> <img src="http://photocdn.sohu.com/20051107/Img227415098.jpg" border="0"> </div> <!--</div>--> </body> </html>
效果如图
参考及实例代码来源：W3School
标签：伦敦 span net back 教程 pad 动效 targe padding
原文地址：http://www.cnblogs.com/liesun/p/7375529.html
