英语原文共 486 页，剩余内容已隐藏，支付完成后下载完整资料
第5章 使用动画和效果装饰页面
本章内容
- 显示和隐藏没有动画的元素
- 使用核心动画效果显示和隐藏元素
- 编写自定义动画
- 控制动画和函数队列
自从1995年LiveScript（即后来的JavaScript）被引入到网景浏览器（Netscape Navigator）中，使得我们可以用脚本控制网页以来，浏览器取得了很大的发展。
在网页开发的早期，由于极少的API以及缓慢的脚本引擎和低性能系统，使得网页开发者的能力非常有限。因此，利用这些有限的能力来编写动画和效果的想法显得非常可笑，在很长一段时间内，唯一的动画效果就是通过动态的GIF图片来实现的（通常很少使用这种方式，它会让网页更加让人讨厌）。
经过无数次的升级，如今的浏览器脚本引擎已经如闪电般快速，在10年前无法想象的硬件上运行，它们赋予了我们网页开发者强大的能力。
但是，尽管我们有很强的能力进行底层操作，但是JavaScript仍然缺少一个简单易用的动画引擎，因此我们必须得自己动手开发。当然，除此之外，jQuery也提供了一个简单的接口来实现各种整洁巧妙的效果。
不过，在我们着手给网页添加酷炫的效果之前，必须先思考一个问题：应该添加吗？就像一部没有情节只有特效的好莱坞大片一样，滥用效果的网页也会引起完全意想不到的负面作用。一定要记住效果应该用来增强页面的可用性，而不是用来炫耀的。
请牢记这个警告，下面我们来看看jQuery提供了什么。
5.1显示和隐藏元素
也许我们想要在一个或一组元素上执行的最普遍的动态效果就是简单地显示或隐藏他们。很快我们就会接触到更加绚丽的动画（例如元素的淡入或淡出），但是有时候我们想要简单地使元素突然出现或消失！
显示和隐藏元素的方法和我们想象的差不多：show()用来显示包装集中的元素，而hide()用来隐藏包装集中的元素。我们准备推迟讲解这些方法的正式语法，原因很快就会清楚；现在我们集中精力不带参数地使用这些方法。
这些方法可能看起来非常简单，但是我们需要记住几件事情。首先，jQuery通过将style.display属性更改为none使元素隐藏。如果包装集中的一个元素已经被隐藏，它会继续保持隐藏状态，但是仍然会被返回给jQuery链。例如，假设有如下HTML片段：
lt;div style='display:none;'gt;This will start hiddenlt;/divgt;
lt;divgt;This will start shownlt;/divgt;
如果应用$('div').hide().addClass('fun')，将会得到如下结果：
lt;div style='display:none;' class='fun'gt;This will start hiddenlt;/divgt;
lt;div style='display:none;' class='fun'gt;This will start shownlt;/divgt;
请注意，尽管第一个元素已经被隐藏，但它仍然被匹配并且也在方法链当中。
其次，jQuery通过将display属性从none更改为block或inline来显示元素，具体更改为哪一个值取决于该属性值先前是否被声明。如果该属性值先前被显式地声明了，则调用show()方法后display属性将恢复到先前的值，否则将取决于该目标元素类型display属性的默认状态。例如，lt;divgt;元素的display属性会被设置为block，而lt;spangt;元素的display属性会被设置成inline。
下面我们来看看如何有效地利用这些方法。
5.1.1实现一个可折叠的“组件”
你一定非常熟悉各种网站，有些网站聚集了其他网站的数据，它们使用结构化的组件，在类似于“仪表板”的页面上展示各个部分的信息。iGoogle网站就是一个很好的例子，如图5.1所示。
在这个网站我们可以自己配置页面的呈现方式，包括移动组件，拉伸组件至全页大小，指定配置信息，甚至是完全删除组件。但是我们不能把一个组件“折叠”到它的标题栏（至少在我写这本书的时候不能），这样就能节省空间，而不用把它从页面中删除。
我们来定义一个自己的仪表板组件，允许用户将他折叠到标题栏，领先谷歌一步。
首先来看看我们想要该组件在正常状态和折叠状态下呈现的效果，分别如图5.2a和图5.2b所示。
在图5.2a中，我们创建了一个组件，它包含两个主要部分：标题栏和主体部分。主体部分包含了该组件的数据，在这个例子中是一串随机的“乱数假文（Loremipsum）”。标题栏包含该组件的标题和一个小按钮，我们通过点击这个按钮来调用折叠和展开功能。点击一下该按钮，该组件的主题部分就会消失，好像是被折叠到标题栏后面，再次点击该按钮，主体部分就会展开，恢复到之前的状态。
图5.1 iGoogle在一系列“仪表板”组件上展示聚集的信息
图5.2a 我们将创建一个仪表板组件，由两个部分组成：一个包含标题和折叠按钮的条，和显示数据的主体部分。
图5.2b 点击折叠按钮，主体部分消失，好像是被折叠到标题栏后面。
用来创建这个组件结构的HTML标记相当简单。为了便于识别元素和应用CSS样式，我们对元素应用了很多类名。
lt;div class='module'gt;
lt;div class='caption'gt;
lt;spangt;Module Captionlt;/spangt;
lt;img src='rollup.gif' alt='rollup' title='rolls up this module'/gt;
lt;/divgt;
lt;div class='body'gt;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam eget enim id neque aliquet porttitor. Suspendisse
nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
Integer at metus. Suspendisse potenti. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Proin quis eros at metus pretium elementum.
lt;/divgt;
lt;/divgt;
结构包含在一个被标记为module类的lt;divgt;元素中，而标题和主体分别包含在标记为caption类和body类的子lt;divgt;元素中。
我们给标题栏中的图片绑定一个click处理程序，使该组件可以折叠，通过hide()和show()方法将非常容易实现这个功能。
将下面这段代码放到就绪处理程序中来观察该组件的折叠行为：
$(div.caption img).click(function(){ 配置按钮
var body$ = $(this).closest(div.module).find(div.body); 选择相应组件的主体部分
if (body$.is(:hidden)) {
body$.show(); 显示主体部分
}
else {
body$.hide(); 隐藏主体部分
}
});
正如我们所料，这段代码首先给标题栏中的图片创建了一个click处理程序。
在click处理程序中，我们首先定位相应组件的主体部分。请记住，我们需要查找到特定的组件主体，因为页面中可能有多个这样的组件，所以我们不能把所有标记为body类的元素全部选中。通过查找最近的module容器可以很快地定位正确的body元素，并且使用它来作为jQuery上下文，查找该容器中的body使用到下面的jQuery表达式：
$(this).closest(div.module).find(div.body)
（如果你不太清楚这个表达式是如何正确地选择元素的，那么现在是时候复习一下第二章关于选择元素的知识了。）
一旦主体部分被选中，决定它显示还是隐藏就是件非常简单的事了（jQuery的is()方法在这里发挥了很大的作用），可以根据情况使用show()方法和hide()方法来显示或隐藏它。
|
注意：在这段实例代码中，我们介绍了一个使用变量来存储包装集引用的习惯：在变量名中包含一个$符号。可以把它作为前缀或后缀（这里我们把它作为后缀——你可以把$看作是单词“wrapper”，则变量名body$可以被读作“body wrapper”）。无论你选择哪种方式，都可以帮你记住这个变量存储的是一个包装集的引用，而不是一个元素或者其他类型的对象。 |
该页面的完整代码请参见文件chapter5/collapsible.module.take.1.html，代码清单5.1中也展示出来了。（如果你觉得文件名中的“take 1”表示我们将再次见到这个例子，那你就猜对了！）
代码清单5.1 可折叠组件的第一种实现方法
lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
lt;titlegt;Collapsible Module amp;mdash; Take 1lt;/titlegt;
lt;link rel='stylesheet' type='text/css' href='../styles/core.css' /gt;
lt;link rel='stylesheet' type='text/css' href='module.css' /gt;
lt;script type='text/javascript' src='../scripts/jquery-1.4.js'gt;lt;/scriptgt;
lt;script type='text/javascript'gt;
$(function() {
$(div.caption img).click(function(){
var body$ = $(this).closest(div.module).find(div.body);
if (body$.is(:hidden)) {
body$.show();
}
else {
body$.hide();
}
});
});
lt;/scriptgt;
lt;/headgt;
lt;body class='plain'gt;
lt;div class='module'gt;
lt;div class='caption'gt;
lt;spangt;Module Captionlt;/spangt;
lt;img src='rollup.gif' alt='rollup' title='rolls up this module'/gt;
lt;/divgt;
lt;div class='body'gt;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam eget enim id neque aliquet porttitor. Suspendisse
nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
Integer
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[151649]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
