1、基本的动画效果
2、淡入淡出的动画效果
3、滑动效果
4、自定义的动画效果
基本的动画效果指的就是元素的隐藏和显示。在jQuery中提供了两种控制元素隐藏和显示的方法，一种是分别隐藏和显示匹配元素，另一种是切换元素的可见状态，也就是如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见的。
1．隐藏匹配元素
使用hide()方法可以隐藏匹配的元素。hide()方法相当于将元素CSS样式属性display的值设置为none，它会记住原来的display的值。hide()方法有两种语法格式，一种是不带参数的形式，用于实现不带任何效果的隐藏匹配元素，其语法格式如下：
hide()
例如，要隐藏页面中的全部图片，可以使用下面的代码：
$("img").hide();
另一种是带参数的形式，用于以优雅的动画隐藏所有匹配的元素，并在隐藏完成后可选地触发一个回调函数，其语法格式如下：
hide(speed,[callback])
speed：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（1000毫秒=1秒）后完全隐藏。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）。
callback：可选参数，用于指定隐藏完成后要触发的回调函数。
例如，要在300毫秒内隐藏页面中的id为ad的元素，可以使用下面的代码：
$("#ad").hide(300);
2．显示匹配元素
使用show()方法可以显示匹配的元素。hide()方法相当于将元素CSS样式属性display的值设置为block或inline或除了none以外的值，它会恢复为应用display：none之前的可见属性。show()方法有两种语法格式，一种是不带参数的形式，用于实现不带任何效果的显示匹配元素，其语法格式如下：
show()
例如，要隐藏页面中的全部图片，可以使用下面的代码：
$("img").show();
另一种是带参数的形式，用于以优雅的动画隐藏所有匹配的元素，并在隐藏完成后可选择地触发一个回调函数，其语法格式如下：
show(speed,[callback])
speed：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（1000毫秒=1秒）后完全显示。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）。
callback：可选参数，用于指定隐藏完成后要触发的回调函数。
例如，要在300毫秒内显示页面中的id为ad的元素，可以使用下面的代码：
$("#ad").show(300);
<!DOCTYPE html>
<html>
<head>
<title>menu.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<style type="text/css">
url{
font-size:12px;
list-style:none; /*不显示项目符号*/
margin:0px; /*设置外边距*/
padding:0px; /*设置内边距*/
}
li{
padding:7px; /*设置内边距*/
}
a{
color:#000; /*设置文字的颜色*/
text-decoration:none; /*不显示下划线*/
}
a:hover{
color:#F90; /*设置文字的颜色*/
}
#menu{
background-image:url(2.png);
float:left; /*浮动在左侧*/
text-align:center; /*文字水平居中显示*/
width:70px; /*设置宽度*/
heigth:295px; /*设置高度*/
padding-top:5px; /*设置顶内边距*/
display:none; /*显示状态为不显示*/
}
</style>
<script type="text/javascript">
$(function(){
$("#flag").mouseover(function(){
//$("#menu").show(1400); //经过1.4秒后完全展现
$("#menu").fadeIn(700); //淡入效果
});
$("#flag").hover(null,function(){
//$("#menu").hide(300); //经过0.3秒后完全隐藏
$("#menu").fadeOut(700); //淡出效果
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="http://www.baidu.com">百度首页</a>
</li>
<li><a href="http://write.blog.csdn.net/postlist">我的博客</a>
</li>
<li><a href="http://www.baidu.com">我的空间</a>
</li>
</ul>
</div>
<img src="001.png" width="30" height="80" id="flag"></img>
</body>
</html>
鼠标划入之前的效果：
鼠标划入之后的动态效果：
3．切换元素的可见状态
使用toggle()方法可以实现切换元素的可见状态。也就是如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见的。toggle()方法的语法格式如下：
toggle()
例如，要实现通过单击普通按钮隐藏和显示全部div元素可以使用下面的代码。
$(document).ready(function(){
$("input[type='button']").click(function(){
$("div").toggle(); //切换有所有div元素的显示状态
});
});
等效于：
$(document).ready(function(){
$("input[type='button']").toggle(function(){
$("div").hide(); //显示div元素
},function(){
$("div").show(); //隐藏div元素
});
});
4.淡入淡出的动画效果
如果在显示或隐藏元素时不需要改变元素的高度和宽度，只单独改变元素的透明度的时候，就需要使用淡入淡出的动画效果了。jQuery中提供了如表所示的实现淡入淡出动画效果的方法。
这3种方法都可以为其指定速度参数，参数的规则与hide()方法和show()方法的速度参数一致。在使用fadeTo()方法指定不透明度时，参数只能是0到1之间的数字，0表示完全透明，1表示完全不透明，数值越小图片的可见性就越差。
例如，如果想把上面的实例修改成带淡入淡出动画的隐藏菜单，可以将对应的jQuery代码修改为以下内容。
<script type="text/javascript">
$(document).ready(function(){
$("#flag").mouseover(function(){
$("#menu").fadeIn(700); //淡入效果
});
$("#menu").hover(null,function(){
$("#menu").fadeOut(700); //淡出效果
});
});
</script>
5.滑动效果
在jQuery中，提供了slideDown()方法（用于滑动显示匹配的元素）、slideUp()方法（用于滑动隐藏匹配的元素）和slideToggle()方法（用于通过高度的变化动态切换元素的可见性）来实现滑动效果。下面分别进行介绍。
1．滑动显示匹配的元素
使用slideDown()方法可以向下增加元素高度动态显示匹配的元素。slideDown()方法会逐渐向下增加匹配的隐藏元素的高度，直到元素完全显示为止。slideDown()方法的语法格式如下：
slideDown(speed,[callback])
speed：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（1000毫秒=1秒）后完全显示。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）。
callback：可选参数，用于指定显示完成后要触发的回调函数。
例如，要在300毫秒内滑动显示页面中的id为ad的元素，可以使用下面的代码：
$("#ad").slideDown(300);
2．滑动隐藏匹配的元素
使用slideUp()方法可以向上减少元素高度动态隐藏匹配的元素。slideUp()方法会逐渐向上减少匹配的显示元素的高度，直到元素完全隐藏为止。slideUp()方法的语法格式如下：
slideUp(speed,[callback])
speed：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（1000毫秒=1秒）后完全隐藏。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）。
callback：可选参数，用于指定隐藏完成后要触发的回调函数。
例如，要在300毫秒内滑动隐藏页面中的id为ad的元素，可以使用下面的代码：
$("#ad").slideDown(300);
3．通过高度的变化动态切换元素的可见性
通过slideToggle()方法可以实现通过高度的变化动态切换元素的可见性。在使用slideToggle()方法时，如果元素是可见的，就通过减小高度使全部元素隐藏，如果元素是隐藏的，就增加元素的高度使元素最终全部可见。slideToggle()方法的语法格式如下：
slideToggle(speed,[callback])
speed：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（1000毫秒=1秒）后完全显示或隐藏。也可以是默认参数slow（600毫秒）、normal（400毫秒）和fast（200毫秒）。
callback：可选参数，用于指定动画完成时触发的回调函数。
例如，要实例单击id为flag的图片时，控制菜单的显示或隐藏（默认为不显示，奇数次单击时显示，偶数次单击时隐藏），可以使用下面的代码：
$("#flag").click(function(){
$("#menu").slideToggle(300); //显示/隐藏菜单
});
伸缩式导航菜单的小例子
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<style type="text/css">
dl {
width: 158px;
margin: 0px;/*设置外边距*/
}
dt {
font-size: 14px;
padding: 0px;/*设置内边距*/
margin: 0px; /*设置外边距*/
width: 146px;
height: 19px;
background-image: url(iamges/title_show.gif); /*设置背景图片*/
padding: 6px 0px 0px 12px;
color: #215dc6; /*设置文字的颜色*/
font-size: 12px;
cursor: hand; /*设置鼠标手势*/
}
dd {
color: #000;
font-size: 12px;
margin: 0px;
}
a {
text-decoration: none;
}
a:hover {
color: #FF6600;
}
#top {
width: 158px;
height: 30px;
background-image: url(images/top.gif);
}
#bottom {
width: 158px;
height: 31px;
background-image: url(images/bottom.gif);
}
.title {
background-image: url(images/title_quit.gif);
}
.item {
width: 146px;
height: 15px;
background-image: url(images/item_bg.gif);
padding: 6px 0px 0px 12px;
color: #215dc6;
font-size: 12px;
cursor: hand;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("dd").hide();
$("dt[class!='title']").toggle(function() {
$(this).css("backgroundImage", "url(images/title_hide.gif)");
$(this).next().slideDown("slow");
}, function() {
$(this).css("backgroundImage", "url(images/title_show.gif)");
$(this).next().slideUp("slow");
});
});
</script>
<body>
<div id="top"></div>
<dl>
<dt>员工管理</dt>
<dd>
<div class="item">添加员工信息</div>
<div class="item">管理员工信息</div>
</dd>
<dt>招聘管理</dt>
<dd>
<div class="item">浏览应聘信息</div>
<div class="item">添加应聘信息</div>
<div class="item">浏览人才库</div>
</dd>
<dt>薪酬管理</dt>
<dd>
<div class="item">薪酬登记</div>
<div class="item">薪酬调整</div>
<div class="item">薪酬查询</div>
</dd>
<dt class="title">
<a href="#">退出系统</a>
</dt>
<div id="bottom"></div>
</body>
</html>
前后效果图：
6.自定义动画效果
在jQuery中，要实现自定义动画效果，主要应用animate()方法创建自定义动画，应用stop()方法停止动画。下面分别进行介绍。
1．使用animate()方法创建自定义动画
animate()方法的操作更加自由，可以随意控制元素的属性，实现更加绚丽的动画效果。animate()方法的基本语法格式如下：
animate(params,speed,callback)
params：表示一个包含属性和值的映射，可以同时包含多个属性，例如 {left:"200px",top:"100px"}。
speed：表示动画运行的速度，参数规则同其他动画效果的speed一致，它是一个可选参数。
callback：表示一个回调函数，当动画效果运行完毕后执行该回调函数，它也是一个可选参数。
2．使用stop()方法停止动画
stop()方法也属于自定义动画函数，它会停止匹配元素正在运行的动画，并立即执行动画队列中的下一个动画。stop()方法的语法格式如下：
stop(clearQueue,gotoEnd)
clearQueue：表示是否清空尚未执行完的动画队列（值为true时表示清空动画队列）。
gotoEnd：表示是否让正在执行的动画直接到达动画结束时的状态（值为true时表示直接到达动画结束时状态）。
实现图片传送带的小程序
所谓图片传送带是指在页面的指定位置固定显示一定张数的图片（其他图片隐藏），单击最左边的图片时，全部图片均向左移动一张图片的位置，单击最右边的图片时，全部图片均向右移动一张图片的位置，这样可以查看到全部图片，还能节省页面空间，比较实用。下面我们就来介绍如何通过jQuery实现图片传送带。
效果图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
img{border:none}
img.enlarged{
position:absolute;
z-index:5;
cursor:pointer;
}
.enlarged-control{
position:absolute;
z-index:6;
cursor:pointer;
}
#featured-books{
position:relative;
background:#ddd;
width:440px;
height:186px;
overflow:scroll;
margin:1em auto;
padding:0;
text-align:center;
z-index:2;
}
#featured-books .covers{
position:relative;
width:4040px;
z-index:1
}
#featured-books a{
float:left;
margin:10px;
height:146px;
}
#featured-books .price{
display:none;
}
#featured-books .control{
position:absolute;
z-index:3;
left:0;
top:0;
width:120px;
height:146px;
}
.enlarged-price{
background:#373c40;
color:#fff;
padding:5px;
font-size:18px;
font-weight:bold;
text-align:right;
position:absolute;
z-index:6;
}
</style>
<script src="../jquery.js"/></script>
<script language="javascript">
jQuery(function(){
function createControl(src){
return $("<img />")
.attr("src",src)
.addClass("control")
.css("opacity",0.6)
.css("display","none")
}
//左图片
var $leftRollover = createControl("imgs/ico/left.png");
//右图片
var $rightRollover = createControl("imgs/ico/right.png");
//放大图片
var $enlargeRollover = createControl("imgs/ico/enlarge.ico");
//大图
var $enlargedCover = $("<img />").addClass("enlarged").hide().appendTo("body");
//close
var $closeButton = createControl("imgs/ico/close.gif")
.addClass("enlarged-control")
.appendTo("body");
var $priceBadge = $("<div />")
.addClass("enlarged-price")
.css("opacity",0.6)
var spacing = 140;
$('#featured-books').css({
'width':spacing*3,
'height':"166px",
"overflow":"hidden"
}).find(".covers a").css({
"float":"none",
"position":"absolute",
"left":1000
})
var setUpCovers = function(){
var $covers = $("#featured-books .covers a");
//$covers.unbind("click");
$covers.unbind("click mouseenter mouseleave");
$covers.eq(0)//left左侧图像单击向右滚动
.css('left',0)
.click(function(event){
/*
$covers.eq(2).css("left",1000);
$covers.eq($covers.length-1).prependTo("#featured-books .covers");
setUpCovers();
event.preventDefault();
*/
$covers.eq(0).animate({'left':spacing},'fast');
$covers.eq(1).animate({'left':spacing*2},'fast');
$covers.eq(2).animate({'left':spacing*3},'fast');
$covers.eq($covers.length-1)
.css("left",-spacing)
.animate({'left':0},'fast',function(){
$(this).prependTo("#featured-books .covers")
setUpCovers();
})
event.preventDefault();
})
.hover(function(){
$leftRollover.appendTo(this).show();
},function(){
$leftRollover.hide();
})
$covers.eq(2)//right右侧图像单击向左滚动
.css("left",spacing*2)
.click(function(event){
/* $covers.eq(0).css("left",1000);
$covers.eq(0).appendTo("#featured-books .covers");
setUpCovers();
event.preventDefault();*/
$covers.eq(0)
.animate({'left':-spacing},'fast',function(){
$(this).appendTo("#featured-books .covers");
setUpCovers();
})
$covers.eq(1).animate({'left':0},'fast');
$covers.eq(2).animate({'left':spacing},'fast');
$covers.eq(3)
.css("left",spacing*3)
.animate({'left':spacing*2},'fast');
event.preventDefault();
})
.hover(function(){
$rightRollover.appendTo(this).show();
},function(){
$rightRollover.hide();
})
//中间图片center
$covers.eq(1)
.css("left",spacing)
.click(function(event){
$enlargedCover.attr("src",$(this).attr('href'))
.css({
'left':($('body').width()-360)/2,
'top':100,
'width':360,
'height':444
})
.show()
.one("click",function(){
$closeButton.unbind('click').hide()
$enlargedCover.fadeOut();
});
var price = $(this).find(".price").text();
$priceBadge.css({
'left':($('body').width()-360)/2,
"top":100
}).text(price).show();
/* $closeButton
.css({
'left':($('body').width()-360)/2,
'top':100,
})
.show()
.click(function(){
$enlargedCover.click();
}); */
event.preventDefault();
})
.hover(function(){
$enlargeRollover.appendTo(this).show();
},function(){
$enlargeRollover.hide();
})
}
setUpCovers();
})
</script>
</head>
<body>
<div id="featured-books">
<div class="covers">
<?php
$dir = "imgs/";
if ($handle = opendir($dir)) {
$i = 0;
while (false !== ($file = readdir($handle))) {
$path = $dir.$file;
if(is_file($path)){
$price = str_pad($i++, 2, 0, STR_PAD_LEFT);
echo <<<ETO
<a href="{$path}">
<img src="{$path}" width="120" height="148"/>
<span class="price">$35.{$price}</span>
</a>
ETO;
}
}
}
?>
</div>
</div>
</body>
</html>