jQuery天生就是用来做动画的。无论是消息框淡出淡入，菜单栏的滑动打开，或者滚动动画，甚至游戏，都可以用内建的方法或者更丰富的插件来完成。

CSS样式属性动画

我们现在有很多的动画方法，滑动、淡出淡入、还有其他的显示隐藏动画，但是我们对于精确的控制动画以及动画到底怎么发生的还不太了解。我们这就来介绍一个非常强大的jQuery函数，animate，这个方法可以让你对任何的CSS属性做动画的效果。我们看看代码：

$('p').animate({
     padding:'20px',
     fontSize:'30px'
},2000)

这段代码会动画操作所有的

，将他们的边距扩大到20px，将字体放大到30px，并且在2秒内完成。

animate方法中，我们需要先传入一个对象作为参数，这个对象的内容就是你需要改变的CSS的属性和他们的值。需要特别注意的一点就是，CSS属性的名称一定要写成驼峰式的，也就是说要写成backgroundColor而不是background-color这样。

你可以传入一个数字作为动画持续的时间，也可以是slow normal fast这样的字符串。CSS属性的值可以是px，em，百分数，或者points。比如：100px,10em,50%,16pt。

更令人激动的是，写入的值也是可以跟当前值相关的，你只需要在前面写上+=或者-=就好了，然后jQuery会自动改写当前的状态。让我们来试试看吧：

1
2
3
4
5

$('#navigation li').hover(function() {
  $(this).animate({paddingLeft: <em></em>}, 200);
}, function() {
  $(this).animate({paddingLeft: <em></em>}, 200);
});

当鼠标经过的时候，就可以看见一个比较漂亮的变化了。

你也可以用很简单的写法来控制某些属性的显示隐藏或者交替：

1
2
3
4

$('#disclaimer').animate({
  opacity: 'hide',
  height: 'hide'
}, 'slow');

可以看见元素的变化。作为练习，你可以尝试改改你能想到的任何属性。animate方法还有一些更加强大的功能，RockUX会在后面的文章中讲到。

颜色动画

在你认识了animate方法之后，你可能也想改改元素的颜色。当然，颜色动画有一点点的不同，因为颜色的值从开始到结束需要一些特别的计算。不想高度宽度移动的像素点那样线性的变化，jQuery需要做一些额外的事情来进行颜色的变化。

颜色计算的函数没有定义在基础库中。因为很多时候并不需要这样的方法，而且为了保证库的大小，也没有加进去。所以我们需要一个插件：Color Animations plugin.

使用插件

官方的插件库中有很多有用的插件。你可以通过名称类别搜索，或者社区给插件的打分来寻找。

当你找到你感兴趣的插件之后，可以下载然后放在你的项目中。在使用之前读一读readme文件或者文档还是有必要的，但是一般是直接包含在自己的文档中，就像包含其他的js文件一样。

对于那些新的插件，大多都是通过文档来找到他们的使用方法的。

在下载和放置好那个颜色函数的插件之后，你就可以动画变化元素的颜色属性了：

1

$('#disclaimer').animate({'backgroundColor':'#ff9f5f'}, 2000);

这样就很炫了吧。

缓动

缓动的意思就是在元素动态变化的时候，有一些加速和减速的效果，从而有一种真实的体验的感觉。缓动通过一些数学算法来变化动画的速度。因为我们使用jQuery，所以暂时不用去搞那些复杂的数学公式。

jQuery中有两种类型的缓动，linear和swing。只要你使用jQuery做动画的时候，都可以使用者两种缓动类。他们两个的区别我们通过下图来表示：

swing缓动类从一个比较慢的速度开始，然后到结束的时候再减速，非常的优雅。视觉上来说，swing缓动看着比线性的linear要舒服很多，jQuery也会在你指定使用缓动之后默认使用swing。

举个例子，当我吗点击之后动画显示第一段落，他会变大然后缩小。我们先使用线性的让他变大，然后使用swing来让他缩小：

1
2
3
4
5

$('p:first').toggle(function() {
  $(this).animate({'height':'+=150px'}, 1000, 'linear');
}, function() {
  $(this).animate({'height':'-=150px'}, 1000, 'swing');
});

这里面又不少jQuery的语法，我们来解释一下：

• 我们通过选择器来获得第一个段落
• toggle事件绑定在第一段落上
• 在处理函数中，this表示触发事件的元素
• 第一个处理函数使用了=+，表示高度增加150px，使用线性缓动
• 第二个处理函数使用-=，表示减少150px，使用swing缓动

如果这些你都搞清楚了，那么可以奖励一下自己了，真不赖。

高级缓动类

缓动类可以提供一些很好的视觉效果，也能胜任很多任务。在swing和linear后面还有很多的缓动效果，可以通过这个插件easing plugin实现。

jQuery UI包含的插件

缓动的库再jQuery UI中有包含。这个库中包含一些常见的插件，包括颜色动画，类的变换还有缓动。引入jQuery UI，你就不需要再一个个的去包含每一个插件了。

只需要下载这个库，然后放在你的jQuery文件包含代码之后就可以了。除了一些新的功能之外，缓动插件还提供了30多个缓动类。一个个解释这些需要耗费大篇幅，也没有必要，我们来看看下面的图表就好了。

你可能注意到，有些算法都在图形外面了，其实这也是一个效果，他最终都会回到原点的。

使用这些新的算法，我们只需要在缓动的地方给成这些名称就好：

1
2
3
4

$('p:first').animate({height: '+=300px'}, 2000, 'easeOutBounce');
$('p:first').animate({height: '-=300px'}, 2000, 'easeInOutExpo');
$('p:first').animate({height: 'hide'}, 2000, 'easeOutCirc');
$('p:first').animate({height: 'show'}, 2000, 'easeOutElastic');

看到这个图，你可能想知道这些缓动选项的名字从哪里来，或者哪里可以看见完整的名单。这些算法来自Robert Penner的缓动方程，这里有详细的描述。

最好的研究这些方程的方法就是去看源代码。

动手吧

休息一下，然后去试试这个插件吧。或许你不会使用到每一个效果，但是对每个都有些了解，还是会在需要的时候快速做出判断的。使用这些特效，会给你的页面增色不少，而且也是成为一个高手必备的东西。[English]

转载请注明：
作者：RockUX-WEB前端
出自：jQuery中的动画

建议继续学习：

1. JQuery实现Excel表格呈现    (阅读：46523)
2. 分享一个JQUERY颜色选择插件    (阅读：12652)
3. jQuery插件---轻量级的弹出窗口wBox.    (阅读：9688)
4. 10个强大的Ajax jQuery文件上传程序    (阅读：7757)
5. jQuery的data()方法    (阅读：7585)
6. jQuery性能优化指南    (阅读：7327)
7. jQuery Color Animations颜色动画插件    (阅读：7090)
8. 精于图片处理的10款jQuery插件    (阅读：6223)
9. jQuery中getJSON跨域原理详解    (阅读：5621)
10. 配合jquery实现异步加载页面元素    (阅读：5375)