51CTO推荐专题：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会自动改写当前的状态。让我们来试试看吧：
- $('#navigation li').hover(function() {
- $(this).animate({paddingLeft: <em></em>}, 200);
- }, function() {
- $(this).animate({paddingLeft: <em></em>}, 200);
- });
当鼠标经过的时候，就可以看见一个比较漂亮的变化了。
你也可以用很简单的写法来控制某些属性的显示隐藏或者交替：
- $('#disclaimer').animate({
- opacity: 'hide',
- height: 'hide'
- }, 'slow');
可以看见元素的变化。作为练习，你可以尝试改改你能想到的任何属性。animate方法还有一些更加强大的功能，RockUX会在后面的文章中讲到。
颜色动画
在你认识了animate方法之后，你可能也想改改元素的颜色。当然，颜色动画有一点点的不同，因为颜色的值从开始到结束需要一些特别的计算。不想高度宽度移动的像素点那样线性的变化，jQuery需要做一些额外的事情来进行颜色的变化。
颜色计算的函数没有定义在基础库中。因为很多时候并不需要这样的方法，而且为了保证库的大小，也没有加进去。所以我们需要一个插件：Color Animations plugin.
使用插件
官方的插件库中有很多有用的插件。你可以通过名称类别搜索，或者社区给插件的打分来寻找。
当你找到你感兴趣的插件之后，可以下载然后放在你的项目中。在使用之前读一读readme文件或者文档还是有必要的，但是一般是直接包含在自己的文档中，就像包含其他的js文件一样。
对于那些新的插件，大多都是通过文档来找到他们的使用方法的。
在下载和放置好那个颜色函数的插件之后，你就可以动画变化元素的颜色属性了：
- $('#disclaimer').animate({'backgroundColor':'#ff9f5f'}, 2000);
这样就很炫了吧。
缓动
缓动的意思就是在元素动态变化的时候，有一些加速和减速的效果，从而有一种真实的体验的感觉。缓动通过一些数学算法来变化动画的速度。因为我们使用jQuery，所以暂时不用去搞那些复杂的数学公式。
jQuery中有两种类型的缓动，linear和swing。只要你使用jQuery做动画的时候，都可以使用者两种缓动类。他们两个的区别我们通过下图来表示：
swing缓动类从一个比较慢的速度开始，然后到结束的时候再减速，非常的优雅。视觉上来说，swing缓动看着比线性的linear要舒服很多，jQuery也会在你指定使用缓动之后默认使用swing。
举个例子，当我吗点击之后动画显示***段落，他会变大然后缩小。我们先使用线性的让他变大，然后使用swing来让他缩小：
- $('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多个缓动类。一个个解释这些需要耗费大篇幅，也没有必要，我们来看看下面的图表就好了。
你可能注意到，有些算法都在图形外面了，其实这也是一个效果，他最终都会回到原点的。
使用这些新的算法，我们只需要在缓动的地方给成这些名称就好：
- $('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的缓动方程，这里有详细的描述。
***的研究这些方程的方法就是去看源代码。
动手吧
休息一下，然后去试试这个插件吧。或许你不会使用到每一个效果，但是对每个都有些了解，还是会在需要的时候快速做出判断的。使用这些特效，会给你的页面增色不少，而且也是成为一个高手必备的东西。
原文链接：http://rockux.com/archives/jquery%E4%B8%AD%E7%9A%84%E5%8A%A8%E7%94%BB
【编辑推荐】
