第6章　动画和效果

在前两章中，我们学习了使用jQuery的基础知识：如何加载jQuery库、选择页面元素，以及响应诸如访问者单击按钮或将鼠标光标悬停到链接上等事件。大多数jQuery程序包含3个步骤：从页面上选择一个元素；向该元素添加一个事件；然后做些事情来响应该事件。在本章中，我们将学习如何使用jQuery内置的效果和动画函数。此外，本章还会介绍与创建视觉效果相关的几个重要的CSS属性，从而回顾CSS知识。

6.1　jQuery效果

让Web页面上的元素出现和消失，这是常见的JavaScript任务。下拉式导航菜单、弹出式工具提示和自动幻灯片播放，这些效果都依赖于按照意愿显示和隐藏元素的能力。jQuery提供了一些函数来实现隐藏和显示元素的目的。

要使用这些效果中的每一个，可以将其应用到一个jQuery选择，这和任何其他的jQuery函数一样。例如，要隐藏类为submenu的所有标签，可以这样写：

$（'.submenu'）.hide（）；

每个效果函数都接收一个可选的速度设置和一个回调函数。速度表示该效果完成所需的时间，而回调则是当效果完成的时候运行的一个函数（参见6.4节中关于回调的详细介绍）。

要给效果分配一个速度，可以应用3个字符串值中的一个，它们是'fast'、'normal'和'slow'；或者使用表示效果发生的毫秒数的一个数值（1000表示1秒，500表示半秒，以此类推）。例如，让一个元素缓慢地淡出视线的代码如下所示：

$（'element'）.fadeOut（'slow'）；

或者，如果希望元素真的很慢地淡出实现，此过程超过10秒：

$（'element'）.fadeOut（10000）；

当使用一种效果使元素消失时，元素并不是真的从DOM（Document Object Model，详细介绍参见4.7节）中删除了。它的代码仍然在浏览器的内存里，但是，它的display属性设置（和CSS的显示设置相同）设置为none。由于这一设置，元素所占用的空间删除了，因此，页面上的其他内容可能移动到隐藏的元素之前所占据的位置。可以在testbed教程文件夹中的effects.html文件上看到所有jQuery效果的作用（如图6-1所示）。

注意：用来设置某种效果的速度的关键字'fast'、'normal'和'slow'，分别与200毫秒、400毫秒和600毫秒是相等的。因此，

$（'element'）.fadeOut（'slow'）；

等同于

$（'element'）.fadeOut（600）；

6.1.1　基本显示和隐藏

jQuery为基本的显示和隐藏元素提供了3个函数：

·show（）使得一个隐藏的元素可见。如果元素已经在页面上可见，那么它没有任何效果。如果没有提供一个速度值，元素会立即出现。然而，如果提供一个速度值，例如show（1000），元素从左上角到右下角动画地出现。

·hide（）隐藏一个可见的元素。如果元素已经是隐藏的，它没有任何效果，这和show（）函数一样。如果没有提供一个速度值，元素会立即消失。然而，如果提供一个速度值，元素以收缩运动的方式动画地淡出视线。

·toggle（）切换元素的当前显示值。如果该元素当前是可见的，toggle（）隐藏该元素；如果该元素是隐藏的，toggle（）显示该元素。当想要有一个单独控件（例如，按钮）来切换一个元素的显示和隐藏的时候，这个函数是理想的选择。

在5.6节的教程中，我们看到了hide（）和toggle（）函数的使用方式。那段脚本使用hide（）实现：在页面的HTML载入时，FAQ页面上的所有答案都消失。然后，使用toggle（）实现：当单击问题时，那些答案交替地显示和隐藏。