在jQuery中为我们提供了一个animate函数，我们可以使用它来完成一些复杂的动画效果。通常网页动画效果都是通过改变CSS属性值来实现的，而通过jQuery animate()函数，这些操作都将变得十分简单。
jQuery animate()函数
jQuery animate()的定义如下：
animate(params,[speed],[easing],[fn])
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。
每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
animate()函数的参数含义如下：
params：一组包含作为动画属性和终值的样式属性和及其值的集合。speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。easing：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。fn：在动画完成时执行的函数，每个元素执行一次。
例如一个animate动画可以像下面这样书写：
$( "#panel" ).animate({
// CSS属性和值
}, 5000, "linear", function() {
// 动画结束后的处理函数
});
上面的代码中，第一个参数是一组CSS属性和值，第二个参数是动画的持续时间，第3个参数是动画的easing类型，第4个参数是动画结束后的回调函数。
上面的介绍都是一些理论上的知识，下面我们将要列举3个关于jQuery animate()函数的例子。
图片碎片还原动画
我们的第一个例子是将一张图片切割为8个大小相等的碎块，然后通过jQuery animate()函数来以动画的形式合并为一张完整的图片。合并后的图片就是上面的这张图片。先来看看效果。
这个DEMO的基本HTML结构如下：
由于用一张完整的图片切割为8张小图片，所以在排列时，上面4张图片，下面4张图片，分别用img_item和img_item2来表示上下两排图片。
接着添加一些CSS样式：
.img_item{
position: absolute;
left: 0;
top:0;
opacity:0;
}
.img_item2{
position: absolute;
left: 0px;
opacity:0;
top:225px;
}
在完成上面的代码之后，我们就可以开始使用jQuery animate()函数来制作动画效果了。
$(document).ready(function(){
var left = 0;
$(".img_item").each(function(i,val){
$(this).animate({
left: left,
opacity: 1
}, 1500 );
left += 200;
});
left = 0;
$(".img_item2").each(function(i,val){
$(this).animate({
left: left,
opacity: 1
}, 1500 );
left += 200;
});
});
上面的代码中，分别对img_item和img_item2进行遍历，然后使用animate()函数分别对每一个元素的left和opacity属性进行操作，这样，图片切片会同时向左移动，透明度有0变为1。
制作序列动画效果
在上面的例子中，所有的图片切片都是同时开始动画的。下面的例子将使这些图片切片按不同的时间延迟先后开始动画。先来看看效果：
这个DEMO的基本HTML结构如下：
唯一与前一个例子不同的地方是这里所有的图片都使用相同的class。这个例子使用的css样式和一个例子相同。下面来看看jQuery代码的实现。
$(document).ready(function(){
var left = 0;
var items = $(".img_item");
animateImg(items,0,0,0);
});
当页面加载完毕之后，首先获取所有的.img_item元素，然后将这些元素作为参数传入animateImg()函数中来处理动画。下面是animateImg()函数的代码：
var indexNum = 1;
var animateImg = function(items,left,height,indexNum){
if(items.length >= indexNum){
var item = items.get(indexNum);
$(item).animate({
left: left,
top : height,
opacity: 1
}, 1500 ,function() {
left += 150;
indexNum++;
if(indexNum % 4 == 0){
left = 0;
height += 150;
}
animateImg(items,left,height,indexNum);
});
}
};
animateImg()函数使用了4个参数，第一个参数是所以图片的jquery集合，第2个和第3个参数定义容器的left和height属性，开始的时候，这两个值都是0，它们位于容器的左上角位置。第4个参数用于图片的分行排列。
在函数中首先使用一个判断表达式来判断是否到达最大的item项，然后获取给定index的item项，接着为它执行animate动画，延迟时间为1500毫秒。执行完动画后，index加1，left属性加150，如果当前的index模4等于0，就进行换行处理。这样不断循环，就制作出来第二个DEMO中的动画效果。
串联动画效果
在前面的两个例子中，我们都是对单个元素进行动画。为了制作更复杂的动画效果，我们需要在单个元素上串联多种动画。这个效果我们只需要在上面的例子的基础上进行一些修改就可以了。
实现代码如下：
var animateImg = function(items,left,height,indexNum){
if(items.length >= indexNum){
var item = items.get(indexNum);
$(item).animate({
left: left,
top : height,
opacity: 1
}, 1500 ,function() {
left += 200;
indexNum++;
if(indexNum % 4 == 0){
left = 0;
height += 225;
}
animateImg(items,left,height,indexNum);
}).animate({ left:left+50}, 1500);
}
};
在这个DEMO中，我们以链式编程的方式多链了一个animate动画，这样就可以在第一个动画结束的时候开始第二个动画。只要你愿意，可以像这样添加多个动画效果。
