6.5　教程：动画的仪表盘

在本教程中，我们将使用animate（）函数移动一个＜div＞标签，使其从页面的左边界向右移动进入人们的视线。这个div是绝对定位的（参见本书6.1.3节了解关于绝对定位的更多内容），以便该框的大部分都悬挂在浏览器窗口边界之外的页面左边界之外（参见图6-3左图）。当访问者将鼠标悬停在div的可见的边界上，这个div会完全移入视线（参见图6-3右图）。要让这个效果更加有趣，我们可以使用两个插件对该div的背景颜色实现动画，并且使用几个不同的缓动方法。

图　6-3　通过将页面元素隐藏到浏览器窗口的一边之外（就像左图中的div，它基本上在视线之外），我们可以得到很多乐趣。通过使用animate（）函数可以将该页面元素完全显示出来（参见右图）

注意：参见本书1.3节的介绍以了解如何下载教程文件。

基本的任务相当简单：

1.选择该＜div＞标签。

别忘了，很多jQuery编程都是从选择页面上的一个元素开始的。在这个例子中，就是鼠标选定的div标签。

2.添加一个hover事件。

Hover事件（参见本书5.4.2节）是一个特殊的jQuery函数，而不是一个真正的JavaScript事件。当一个访问者将鼠标光标悬停在该元素上的时候，它允许执行一组操作，然后，当访问者将鼠标光标从元素上移走时，会执行另一组动作（hover事件实际上只是本书5.1.2节所介绍的mouseOver和mouseOut事件的一个组合）。

3.为mouseover事件添加animate函数。

当访问者将鼠标光标悬停到这个div上的时候，我们将对div左边的位置进行动画，将其从视线之外移动到浏览器窗口的左边。此外，我们还将对该div的背景颜色进行动画。

4.为mouseout事件添加另一个animate函数。

当访问者将鼠标光标从div上移走的时候，我们将对div进行动画，使其回到最初的位置并具有其最初的背景颜色。

编程

1.在文本编辑器中打开chapter06目录下的animate.html文件。

这个文件已经包含了到jQuery文件的一个链接，并且也已经有了$（document）.ready（）函数（参见本书5.4节的介绍）。然而，由于我们要对div的背景颜色进行动画，并且要使用几个有趣的缓动方法，因此需要添加两个jQuery插件：color插件和easing插件。

2.单击第一个＜script＞标签之后的空行，并且添加如下粗体所示的代码：

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

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

＜script src="../_js/jquery.color.js"＞＜/script＞

jQuery插件（我们将在下一章中了解更多）只不过是为jQuery添加功能的外部JavaScript文件，通常它们允许你给站点添加复杂的效果或功能，而不需要太多的编程（由你所编写的）。接下来，我们将选择div并为其添加hover（）函数。

3.在$（document）.ready（）函数内的空行上单击，并且输入$（'#dashboard'）.hover（）；//end hover，以使得代码如下所示：

$（document）.ready（function（）{

$（'#dashboard'）.hover（）；//end hover

}）；//end ready

$（'#das hboard'）选择了＜div＞标签（该标签有一个id为dashboard）。hover（）函数接收两个参数，这是两个匿名函数（参见本书4.10.1节），它们描述了当访问者将其鼠标光标悬停在div上的时候，以及随后将鼠标光标移开的时候，div做些什么。我们一段一段地构建这些代码，而不是一次输入所有的代码，首先添加hover（）函数，然后添加两个匿名函数的框架。这种方法很有用，因为如果你一不小心，圆括号、花括号、逗号和分号的嵌套就会层出不穷。

4.在hover（）函数的括号之间单击，添加两个空白的匿名函数：

$（document）.ready（function（）{

$（'#dashboard'）.hover（

function（）{

}，

function（）{

}

）；//end hover

}）；//end ready

在为jQuery的.hover（）函数添加完其所有程序之后，它看上去有点杂乱（参见步骤12）。然而，它只不过是接收两个匿名函数作为参数的函数。在添加函数中的所有程序之前，先添加匿名函数的“外壳”，这是个好办法，可以确保已经正确地设置了匿名函数。

提示：经常测试你的代码以确保没有进行任何录入错误，这是个好主意。在步骤4中，我们可以在第一个匿名函数中输入alert（'mouseOver'），并且在第二个匿名函数中输入alert（'mouseOut'），然后，在Web浏览器中预览该页面。当鼠标光标放到该div上的时候，应该会看到一个警告框出现，而当把鼠标光标移开的时候（例如，关闭第一个警告对话框），将会看到另一个警告框。如果没有出现警告框，那说明录入有误。按照这些步骤仔细检查代码，或者使用本书1.6节介绍的步骤，使用浏览器的错误控制台找出错误。

5.在第一个匿名函数中输入type$（this）.animate（）；//end animate。

正如4.10.2节所介绍的，在一个事件中，$（this）引用我们想要为其添加事件的页面元素。在这个例子中，$（this）引用带有ID dashboard的＜div＞标签。换句话说，将鼠标悬停在这个div上也会使其动画。

6.添加带有你想要对其实现动画的CSS属性的一个对象直接量：

$（document）.ready（function（）{

$（'#dashboard'）.hover（

function（）{

$（this）.animate（

{

left：’0’，

backgroundColor：'rgb（255，255，255）’

}

）；//end animate

}，

function（）{

}

）；//end hover

}）；//end ready

animate（）函数的第一个参数是包含了CSS属性的一个对象直接量（参见本书4.8.3节）。在这个例子中，该div当前有一个left值为—92像素，因此，div的大部分是隐藏的，悬挂在浏览器窗口的左边界之外。通过将其left值动画为0，我们实际上将它从左边完全移入视线之中。同样，通过color插件，我们将其背景颜色由蓝色改为白色。接下来，我们将为动画设置一个时间值。

7.在对象直接量的结束的}之后输入一个逗号，按下回车键并输入500。

这个逗号标志着传递给animate（）函数的第一个参数结束了，而500将动画的长度设置为半秒钟，也就是500毫秒。最后，我们将设置一个缓动方法。

8.在500的后面输入逗号，按下回车键，并且输入'easeInSine'，使你的代码如下所示：

$（document）.ready（function（）{

$（'#dashboard'）.hover（

function（）{

$（this）.animate（

{

left：’0’，

backgroundColor：'rgb（255，255，255）’

}，

500，

'easeInSine'

）；//end animate

}，

function（）{

}

）；//end hover

}）；//end ready

animate（）函数的最后一个参数'easeInSine'告诉该函数使用这样一个缓动方法，它开始较慢，随后加速。

9.保存该文件。在浏览器中预览，并且将鼠标光标放在div上。

这个div应该会迅速进入视线。如果不是这样，使用本书1.6节介绍的技术来调试错误。当然，当鼠标离开div的时候，不会发生什么。我们必须给第二个匿名函数添加animate函数。

10.将如下的代码添加到第二个匿名函数中：

$（this）.animate（

{

left：’-92px'，

backgroundColor：'rgb（110，138，195）’

}，

1500，

'easeOutBounce'

）；//end animate

这段代码将第一个动画的过程反转，将div移回到窗口的左边界之外，并且将背景颜色恢复为蓝色。时间略有不同，1.5秒取代了半秒，缓动方法也不同。

11.保存该文件。在Web浏览器中预览，并且将鼠标光标移动到div之上再移开。

你将会看到div进入视线，然后又离开视线。然而，如果重复且快速地将鼠标光标移来并移走，你会注意到一些奇怪的行为：在你完成鼠标光标移动之后，这个div将保持滑入和滑出视线很长一段时间。这个问题是jQuery对一个元素上的动画进行排队的方式所引起的。

正如本书6.5节所介绍的，给一个元素添加的任何动画，都会加入到针对该元素的一种队列中去。例如，如果让一个元素淡入视线、淡出视线，然后再淡入视线，jQuery依次执行每个效果。

本教程的代码中所发生的事情是，每次当鼠标光标移到div上或移开的时候，都会有一个动画添加到队列中。因此，快速地把鼠标光标在div上移来移去，将会创建一个很长的效果列表供jQuery执行：用动画将div移入视线，移出视线，移入视线，移出视线等。这个问题的解决方法是，在执行一个新的动画之前，停止该div上的所有动画。换句话说，当鼠标光标移动到div之上的时候，div就处于进行动画的过程之中，那么jQuery应该停止当前的动画，并且处理mouseover所请求的动画。幸运的是，jQuery提供了一个stop（）函数，专门针对这个问题。

12.在两个匿名函数中的$（this）和.animate之间添加.stop（）。完成后的代码如下所示（粗体显示为新添加的部分）：

$（document）.ready（function（）{

$（'#dashboard'）.hover（

function（）{

$（this）.stop（）.animate（

{

left：’0’，

backgroundColor：'rgb（255，255，255）’

}，

500，

'easeInSine'

）；//end animate

}，

function（）{

$（this）.stop（）.animate（

{

left：’-92px'，

backgroundColor：'rgb（110，138，195）’

}，

1500，

'easeOutBounce'

）；//end animate

}

）；//end hover

}）；//end ready

这里的.stop（）函数在开始一个新的动画之前就直接结束了div上的任何动画，并且防止多个动画放入到一个队列中。保存该页面，并且在Web浏览器中尝试它。在chapter06文件夹下可以找到本教程的一个完成后的版本，即complete_animate.html。