6.3　动画

我们不只可以使用jQuery提供的内置效果。jQuery还提供了一个animate（）函数，允许对任何CSS属性动画，它接收像素、em和百分比值。例如，可以对文本大小、页面上元素的位置、对象的透明度或者边框的宽度设计动画。

注意：jQuery本身不能对颜色动画，例如，文本的颜色、背景颜色或者边框颜色。然而，jQuery Color插件可以做到这些。本教程包含了该插件的一个副本，并且6.5节将介绍起作用的生动的颜色的一个示例。可以从https：//github.com/jquery/jquery-color获取该颜色插件的最新版本（简而言之，插件是包含了额外的JavaScript程序的一个单独文件，而这些程序可以为jQuery增添功能）。

要使用这个函数，必须传递一个对象直接量（参见4.8.3节），其中包含想要改变的CSS属性以及希望动画的值的列表。例如，假设想要动画一个元素：将其从页面左边界移动650个像素，将其透明度改为50%，并将其字体大小增加到24像素。下面的代码使用这些属性和值创建了一个对象：

{

left：’650px'，

opacity：.5，

fontSize：’24px'

}

注意，如果一个值包含px、em或%这样的单位，必须将值放在引号中。在这个例子中，需要用引号将’650px'括起来，是因为它包含'px'，但是，不用将opacity的值括起来，因为0.5只是一个数字，而不包含任何其他的字母或其他字符。同样，用引号将属性（left、opacity和fontSize）括起来也是可选的。

注意：JavaScript不会接收CSS属性的连字符。例如，font-size是一个有效的CSS属性，但是JavaScript不会理解它，因为连字符具有特殊的含义（它是JavaScript的减号运算符）。在JavaScript中使用CSS属性的时候，删除连字符并且把跟在连字符后面的单词的第一个字母大写。例如，font-size变成了fontSize，而border-left-width变成了borderLeftWidth。然而，jQuery允许使用连字符，但是，必须把属性名放在引号中，如下所示：

{

'font-size'：’24px'，

'border-left-width'：’2%’

}

假设想要使用这些设置对ID为message的一个元素实现动画。可以像下面这样使用animate（）函数：

$（'#message'）.animate（

{

left：’650px'，

opacity：.5，

fontSize：’24px'

}，

1500

）；

animate（）函数可以接收几个参数。第一个参数是一个对象直接量，其中包含了要动画的CSS属性。第二个参数是动画的时间长度（以毫秒为单位）。在上面的例子中，动画持续1500毫秒，即1.5秒。

注意：为了使用CSS的left、right、top或bottom属性来对元素的位置实现动画，必须把元素的CSS position属性设置为absolute或relative。只有这两个定位属性允许给其赋定位值（参见本书6.1.3节）。

可以使用+=或-=作为动画选项的一部分，从而根据属性的当前值来设置它。例如，假设想要这样对一个元素实现动画：每次单击它的时候都将它向右移动50像素。可以这么做：

$（'#moveIt'）.click（function（）{

$（this）.animate（

{

left：’+=50px'

}，

1000）；

}）；

注意：我们不能对border-width属性实现动画。它是一个缩写的属性，用来一次性设置所有4个边框的宽度：

border-width：2px 5px 2px 6px；

如果想要对一个边框的宽度实现动画，需要对想要实现动画的每个边框使用全名。例如，如果想要对所有4个边框实现动画，以最终使得每个边框的宽度变为20像素，对于传递给animate函数的对象直接量，需要为其添加每个边框宽度属性（border-width-left、border-width-top等）：

$（'#element'）.animate（

{

borderTop：20px，

borderRight：20px，

borderBottom：20px，

borderLeft：20px

}，1000）；

缓动

jQuery效果函数（slideUp（）、fadeIn（）等）和animation（）函数都接收另一个用来控制动画过程的速度的参数，这就是缓动（easing），它确定了动画过程不同时刻的速度。例如，将一个元素移过页面的时候，可能让这个元素缓慢地开始移动，然后变得很快，最后随着动画的完成再次慢下来。给动画添加缓动，使得动画在视觉上更有趣且更有动态感。

jQuery只包含了两个缓动方法：swing和linear。linear方法提供了一个稳定的动画，以使得动画的每个步骤都是相同的（例如，如果要让一个元素以逐渐变化的方式穿过屏幕，每一步的距离和前一步都是相同的）。swing要更加动态一些，随着动画的开始变得更加快一些，然后再慢下来。swing是一个常用设置，因此，如果没有指定任何缓动，jQuery会使用swing方法。

对于任何jQuery效果来说，缓动方法是其第二个参数，因此，要使用linear方法将一个元素滑出视线，可以这样编写代码：

$（'#element'）. slideUp（1000，'linear'）；

当使用animate（）函数的时候，缓动方法是第三个参数，第一个参数是一个对象直接量，包含了我们想要实现动画的CSS属性；第二个参数是动画的整体速度。例如，要对6.3节的动画代码使用linear缓动方法，可以像下面这样编写代码：

$（'#message'）.animate（

{

left：’650px'，

opacity：.5，

fontSize：’24px'

}，

1500，

'linear'

）；

然而，并不仅限于使用jQuery所提供的两个缓动方法。得益于其他程序员的辛勤工作，可以添加一系列的其他的缓动方法，其中的一些看上去生动有趣。使用jQuery easing插件（可以从http：//gsgd.co.uk/sandbox/jquery/easing/以及教程下载中获取），可以以某种相当生动的方式来实现动画效果。例如，easeInBounce方法使得一个动画的速度和方向都快速变化，就好像这个元素在不断弹跳起来一样。

提示：使用easing插件，有很多不同的缓动方法，并且大多数插件的名称并不能帮助你了解这个缓动方法看上去是什么样的。要更好地了解不同的缓动方法的视觉效果，可以访问一下www.robertpenner.com/easing/easing_demo.html，在那里，可以自行尝试每种方法。

要使用easing插件（这是一个外部JavaScript文件），可以把该文件附加到页面中，跟在连接到jQuery库的代码的后面就行了。一旦连接到了easing插件，就可以使用任何可用的缓动方法（参见http：//gsgd.co.uk/sandbox/jquery/easing/以获取一个完整的列表）。例如，假设想要在访问者单击一个div标签的时候使其尺寸变大，并且想要通过使用easeInBounce方法让动画更加有趣。假设这个div有一个ID为animate，代码可能会如下所示：

1＜script src="js/jquery-1.6.3.min.js"＞＜/script＞

2＜script src="js/jquery.easing.1.3.js"＞＜/script＞

3＜script＞

4$（document）.ready（function（）{

5$（'#animate'）.click（function（）{

6$（this）.animate（

7{

8 width：’400px'，

9 height：’400px'

10}，

11 1000，

12'easeInBounce'）；//end animate

13}）；//end click

14}）；//end ready

15＜/script＞

第1行和第2行载入了jQuery和easing插件。第4行是我们曾经见过的ready（）函数（参见本书5.4节），第5行将一个click事件处理程序添加给该div。关键的动作在第6行到第12行。正如我们在4.10.2节所介绍的，在一个事件内部，$（this）引用响应该事件的元素，在这个例子中，就是这个＜div＞标签。换句话说，通过单击div，你也可以通过改变其宽度和高度（第8行和第9行）来对其实现动画。第11行使得动画持续1秒钟（1000毫秒），第12行将缓动方法设置为easeInBounce（你可以用任何其他的缓动方法，如easeInOutSine、easeInCubic等，来替换它）。

注意：在教程文件的chapter06文件夹下，可以找到应用这段代码的一个示例。在浏览器中打开文件easing_example1.html。文件easing_example2.html展示了如何使用toggle（）事件（参见本书5.4.3节）对该div应用两个不同的缓动方法。