众所周知，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
时间： 2024-10-15 06:11:20