效果——为操作添加艺术性.doc

1、4效果为操作添加艺术性Move it up and down nowMove it all around now Devo, “Gut Feeling”如果说行（action）胜于言，那么在 JavaScript的世界里，效果则会让操作（action ）更胜一筹。通过jQuery，我们不仅能够轻松地为页面操作添加简单的视觉效果，甚至能创建更精致的动画。jQuery效果确实能增添艺术性，一个元素逐渐滑入视野而不是突然出现时，带给人的美感是不言而喻的。此外，当页面发生变化时，通过效果吸引用户的注意力，则会显著增强页面的可用性（在AJAX应用程序中尤其常见） 。在本章中，我们就来探索一些这样的效果，

2、并将这些效果以有趣的方式组合起来。4.1 修改内联 CSS在接触漂亮的jQuery效果之前，有必要先简单地谈一谈CSS。在前几章中，为了修改文档的外观，我们都是先在单独的样式表中为类定义好样式，然后再通过jQuery来添加或者移除这些类。一般而言，这都是为HTML应用CSS的首选方式，因为这种方式不会影响样式表负责处理页面表现的角色。但是，在有些情况下，可能我们要使用的样式没有在样式表中定义，或者通过样式表定义不是那么容易。针对这种情况，jQuery提供了. css()方法。这个方法集获取方法（getter）和设置方法（setter）于一体。为取得某个样式属性的值，可以为这个方法传递一个字符串

3、形式的属性名，比如. css(backgroundColor)。对于由多个单词构成的属性名，jQuery既可以解释连字符版的CSS表示法（如 background-color） ，也可以解释驼峰大小写形式（camel-cased）的DOM 表示法（如b ackgroundColor） 。在设置样式属性时，. css()方法能够接受的参数有两种，一种是为它传递一个单独的样式属性和值，另一种是为它传递一个由属性 值对构成的映射 1（map）：第 4 章4.1 修改内联 CSS 45 .css(property,value) .css(property1: value1, property-2: v

4、alue2)有经验的JavaScript开发者会将这些jQuery映射看成是JavaScript 对象字面量。说明 一般来说，数字值不需要加引号而字符串 值需要加引号。但是，当使用映射表示法时，如果属性名使用驼峰大小写形式的DOM 表示法， 则可以省略引号。使用. css()的方式与我们前面使用. addClass()的方式相同 将它连缀到选择符后面并绑定到某个事件。为此，我们仍以样式转换器为例，但这次使用的HTML稍有不同：在通过链接的样式表为这个文档添加了一些基本样式规则之后，初始的页面如图4-1所示。图 4-1在这个版本的样式转换器中，包含两个以d iv元素表现的按钮。单击s witch

5、er-large div会增大s peech div中文本的字体大小，而单击 switcher-small div则会减小字体大小。如果每次都增大或减小为预定的值，那么仍然可以使用. addClass()方法。但是，这次假设我们希望每单击一次按钮，文本的字体大小就会持续地递增或者递减。虽然为每次单击定义一个单独的类，然后迭代这些类也是可能的，但更简单明了的方法是每次都以当前字体大小乘以一个设定的值，得到新的字体大小。同以前一样，我们代码仍然是从$ (document).ready()和$ (#switcher-large).click()事件处理程序开始：1 此处的“映射”为JavaScrip

6、t 中的对象字面量。下同。译者注46 第 4 章 效果为操作添加艺术性接着，通过$ (div.speech).css(fontSize)可以轻而易举地取得当前的字体大小。不过，由于返回的值中既包含数字值也包含度量单位，所以需要把这两部分保存到各自的变量中，在乘出新的字体大小后，再重新加上单位。同样，在需要多次使用某个jQuery对象时，最好也把这个对象保存到一个变量中。.click()中的第一行用于把s peech div保存到一个变量中。我们注意到，变量名$ speech中有一个$ 。因为$ 在JavaScript中是一个合法的字符，所以通过它我们可以提醒自己变量中保存的是一个jQuery对

7、象。下一行用于保存 speech div中的字体大小，比如1 2px。接下来的两行中使用了p arseFloat()和. slice()。其中，p arseFloat()函数会在一个字符串中从左到右地查找一个浮点（十进制）数。例如，它会将字符串1 2转换成数字1 2。另外，它还会去掉末尾的非数字字符，因此1 2px就变成了1 2。如果字符串本身以一个非数字开头，那么p arseFloat()会返回N aN，即 Not a Number（非数字） 。函数的第2个参数用以确保将这个数译码为十进制数，而不是八进制或其他表示法。.slice()方法返回字符串中从指定的字符开始的一个子字符串。因为这里使

8、用的度量单位（p x）是两个字符，所以我们指定子字符串应该从倒数第2个字符开始。至 此 ， 所 剩 的 就 是 将 num乘 以 1.4， 然 后 再 连 接 两 个 已 分 解 的 变 量 num和 unit来 设 置 字 体 大 小 了 ：4.1 修改内联 CSS 47说明 其中，等式n um *= 1.4是n um = num * 1.4的简写形式。同样，对于其他基本的数学运算，也可使用这种简写形式，比如：加，n um += 1.4； 减，n um -= 1.4； 除，n um /= 1.4和取模（除法的余数），n um %= 1.4。现在，当用户单击s witcher-large di

9、v时，s peech div中的文本就会像图4-2中所示的那样变大。图 4-2再单击一次，文本会变得更大。要通过单击s witcher-small div减小字体大小，需要使用除法而不是乘法，即n um /= 1.4。同样，更好的方案是把对这两个div的单击操作，通过 button类组合到一个. click()处理程序中。在设置完变量后，再根据用户单击的div的ID来决定使用乘法还是除法。下面就是相应的代码：48 第 4 章 效果为操作添加艺术性根据第3章学习的内容，我们知道可以访问由t his引用的DOM元素的i d属性，因而就有了if和 else if语 句 中 的 代 码 。 这 里 ，

10、 如 果 仅 测 试 属 性 的 值 ， 使 用 this显 然 要 比 创 建 jQuery对 象 更 有效 。4.2 基本的隐藏和显示基本的. hide()和. show()方法不带任何参数。可以把它们想象成类似. css(display, string)方法的简写方式，其中s tring是适当的显示值。不错，这两个方法的作用就是立即隐藏或显示匹配的元素集合，不带任何动画效果。其中，. hide()方法会将匹配的元素集合的内联s tyle属性设置为d isplay:none。但它的聪明之处是，它能够在把d isplay的值变成n one之前，记住原先的d isplay值，通常是b lock

11、或inline。恰好相反，. show()方法会将匹配的元素集合的d isplay属性，恢复为应用d isplay: none之前的可见属性。.show()和. hide()的这种特性，使得它们非常适合隐藏那些默认的d isplay属性在样式表中被修改的元素。例如，在默认情况下，元素具有d isplay:block属性，但是，为了构建水平的导航菜单，它们可能会被修改成d isplay:inline。而在类似这样的 元素上面使用.show()方法，不会简单地把它重置为默认的d isplay:block，因为那样会导致把 元素放到单独的一行中；相反，. show()方法会把它恢复为先前的d isp

12、lay:inline状态，从而维持水平的菜单设计。要示范这两个方法，最明显的一个例子就是在前面的HTML中，为段落末尾加上一个省略号，然后再加上一个段落：4.2 基本的隐藏和显示 49当DOM就绪时，隐藏第2个段落：现在的讲话（speech）文本看起来如图4-3所示。图 4-3然后，当用户单击第1段末尾的省略号（. ）时，就会隐藏省略号同时显示第2个段落：此时的讲话文本如图4-4所示。图 4-450 第 4 章 效果为操作添加艺术性虽然. hide()和. show()方法简单实用，但它们没有那么花哨。为了增添更多的艺术感，我们可以为它们指定速度。4.3 效果和速度当在. show()或. h

13、ide()中指定一个速度参数时，就会产生动画效果，即效果会在一个特定的时间段内发生。例如. hide(speed)方法，会同时减少元素的高度、宽度和不透明度，直至这 3个 属 性 的 值 都 达 到 0， 与 此 同 时 会 为 该 元 素 应 用 CSS规 则 display:none。 而 .show(speed)方法则会从上到下增大元素的高度，从左到右增大元素的宽度，同时从0到1增加元素的不透明度，直至其内容完全可见。1. 指定显示速度对于jQuery 提供 的 任 何 效 果 ， 都 可 以 指 定 3种 速 度 参 数：slow、normal和fast 。使用.show(slow)会

14、在0.6秒内完成效果，. show(normal)是0.4秒，而. show(fast)则是0.2秒。要指定更精确的速度，可以使用毫秒数值，例如. show(850)。注意，与字符串表示的速度参数名称不同，数值不需要使用引号。下面，我们就为林肯盖茨堡演说辞 （Lincoln s Gettysburg Address）的第2段指定显示速度：如果能够在效果完成大约一半时捕获段落的外观，那么应该看到类似图4-5所示的结果。图 4-52. 淡入和淡出如果想在显示整个段落时，只是逐渐地增大其不透明度，那么可以使用. fadeIn(slow)方法：4.4 多重效果 51这一次如果捕获到段落显示到一半时的外

15、观，则会变成如图4-6所示。图 4-6最近两次效果的差别在于，. fadeIn()会在一开始设置段落的尺寸，以便内容能够简单地逐渐显示出来。类似地，要逐渐减少不透明度，可以使用. fadeOut()。4.4 多重效果在绑定到jQuery核心的效果中，只有s how()和h ide()会同时修改多个样式属性高度、宽度和不透明度。其他效果则只修改一种属性。 fadeIn()和f adeOut()：不透明度 fadeTo()：不透明度 slideDown()和s lideUp()：高度不过，jQuery 也提供了一个强大的a nimate()方法，通过该方法可以创建包含多重效果的自定义动画。a ni

16、mate()方法接受以下4个参数。(1) 一个包含样式属性及值的映射与本章前面讨论的. css()方法中的映射类似。(2) 可选的速度参数既可以是前面提到的预置的字符串，也可是一个毫秒数值。(3) 可选的缓动（easing）类型将在第10章中讨论的一个高级选项。(4) 可选的回调函数将在本章后面讨论。把其中3个参数放到一起，结果如下所示：4.4.1 构建具有动画效果的 show()我们再看一看让林肯盖茨堡演说辞第2段逐渐显示的代码：52 第 4 章 效果为操作添加艺术性还记得吧，. show(slow)会同时修改宽度、高度和不透明度属性。因此，事实上它只是.animate()方法的一种内置了特

17、定样式属性的简写形式。如果想通过. animate()得到同样的效果，那么相应的代码如下所示：显然，. animate()拥有它自己的一些简写的参数值！这里，我们使用简写的s how将高度、宽度等恢复到了它们被隐藏之前的值。在此，也可以使用h ide、t oggle或其他任意数字值。4.4.2 创建一种自定义的动画效果通过. animate()方法，不仅能够控制其他效果方法中使用的样式属性，而且，也可以控制其他属性，比如l eft和t op。通过使用额外的属性，能够创建更加精致新颖的效果。比如说，可以在一个元素的高度增加到50像素的同时，将它从页面的左侧移动到页面右侧。下面，我们就为样式转换按

18、钮实现这一效果。图4-7是移动它们之前的屏幕截图。图 4-7我们要把这两个按钮向右移动，同时增加它们的高度，而触发这个动画效果的操作是单击链接上方的Style Switcher 文本。于是，相应的代码应该如下所示：4.4 多重效果 53这些代码可以增加按钮的高度，但此时还不能改变它们的位置。所以，下面还需要修改CSS，以便能够改变它们的位置。通过CSS设置定位在使用. animate()方法时，必须明确CSS对我们要改变的元素所施加的限制。例如，在元素的CSS定位没有设置成r elative或a bsolute的情况下，调整l eft属性对于匹配的元素毫无作用。所有块级元素默认的CSS定位属性

19、都是s tatic，这个值精确地表明：在改变元素的定位属性之前试图移动它们，它们只会保持静止不动。说明 要了解与绝对（absolute）和相对（relative）定位有关的更多信息， 请参考Joe Gillespie的文章“Absolutely Relative”（http:/ Switcher，最终完成的效果将如图4-8所示。图 4-84.4.3 理解数字的含义通过仔细观察代码，可以发现两个值，l eft属性的6 50和h eight属性的3 8：为什么用两个数？为什么不给左侧位置指定7 50或8 00？而且，更奇怪的是，为什么不给高54 第 4 章 效果为操作添加艺术性度指定5 0？说起左

20、侧位置，我们只能承认这个值完全是估计的！也就是说，我们只能猜测页面有多宽。尽管我们也知道，对于那些使用宽屏和具有高分辨率显示器的人，结果可能是按钮会停留在页面中间的某个地方。另一方面，3 8像素的高度则是我们有目的地指定的。因为这两个按钮，除设置了p osition: relative之外，还应用了p adding: 5px和b order: 1px solid #e3e3e3。但由于h eight属性的值中不包含内边距和边框，所以为了使按钮达到5 0像素的总高度，需要从中减去上、下内边距和上、下边框的宽度值。虽然我们在样式表中使用了简写的p adding和b order属性，但它与我们分别为

21、4条边设置5像素的内边距和1像素的边框宽度，效果是一样的，比如：也就是说，我们要计算下面这个算式：代入相应的值，就会得到：而结果呢，当然是38！以上计算的依据是W3C在CSS规范中提出的盒模型。有关该模型的完整规范可以在http:/www.w3.org/TR/REC-CSS2/box.html中找到。4.4.4 改进自定义动画效果现在，回到我们在自定义动画效果中遇到的左侧位置的问题上。如果能够把这两个按钮移/* 设置每一边的内边距 */* 设置每一边的边框宽度 */4.4 多重效果 55动到将它们的右边与下方段落的右边对齐（从视觉上看只是近似，因为此时的段落不是右对齐） ，那就非常理想了。下面

22、就是解决这个问题的步骤。(1) 取得段落的宽度。(2) 取得按钮的宽度，包括其左、右内边距和边框的宽度。(3) 从段落的宽度中减去按钮的宽度。(4) 使用计算的结果（以变量的形式）作为. animate()方法的l eft值。为了计算按钮的总宽度，同时保证代码的可读性，需要设置很多变量。以下就是新的改进之后的代码：现在，按钮与段落沿着右边准确地对齐了，如图4-9所示。在前面的代码中，为了将变量的数值加到一起，频繁地使用了JavasScript的p arseInt()函数，这个函数与p arseFloat()的作用类似，但是，它返回的是一个整数，而不是一个浮点数。由于通过. css()方法返回的

23、每个值后面都带有p x单位，例如 paddingRight的值是5 px，因此要想完成加法或减法运算，就必须从这些变量中删除p x，只留下实际的数字。但是，要注意一点，这种情况下只有使用像素值是最安全的，因为IE可能会错误地解释其他度量单位。/取得所有的宽度/计算总宽度56 第 4 章 效果为操作添加艺术性图 4-9不过，jQuery 也提供了与. css(width)返回相同数值的简写方法 width()，这个方法返回的值不带度量单位。4.5 并发与排队效果通过刚才的例子，可以看出. animate()方法在为一组特定的元素创建并发效果时非常有用。然而，有的时候我们需要的则是排队效果，即让效

24、果一个接一个地发生。4.5.1 处理一组元素当为同一组元素应用多重效果时，可以通过连缀这些效果轻易地实现排队。为了示范排队效果，我们来看一看向右移动并扩大转换器的那个简单一点的例子：我们知道，目前这两个动画效果（l eft:650和h eight:38）事实上是同时发生的。要排队这些效果，我们可以简单地将它们拆开并连缀起来：现在，按钮首先会向右移动650像素，然后高度再增长到50像素（38加上下外边距及边框） 。如果我们想先增加高度，只需将代码中的这两个动画效果颠倒位置即可。虽然连缀允许我们把这两个. animate()方法放在同一行，但为了更好的可读性，这里故意4.5 并发与排队效果 57将

25、它们分开放在了各自的一行中。通过使用连缀，可以对其他任何jQuery效果进行排队，而并不限于 .animate()方法。比如说，我们可以按照下列顺序对按钮上的效果进行排队：(1) 将它们的不透明度减退为0.5，使它们呈半透明状。(2) 将它们向右移动650像素。(3) 将它们渐增回完全不透明。(4) 通过将它们滑到上方最终隐藏它们。我们所要做的，就是在代码中按照相同的顺序连缀这些效果：当对一组元素的效果进行排队时，需要注意的最后一个关键问题是，排队不适用于其他的非效果方法，例如. css()。为示范这个问题，我们假设需要在动画的末尾改变按钮的背景颜色，而不是将它们向上滑出。那么，我们可以试一试

26、下面的代码：然而，即使将改变背景的代码放在了方法链的末尾，它也会随着单击事件的发生而立即执行。要是把. css()从连缀的方法中拿出来，再重复使用一次选择符表达式会怎么样呢？58 第 4 章 效果为操作添加艺术性一切照旧当单击转换器标签时，按钮的背景颜色仍然会立即改变。那么，应该怎样排队非效果方法呢？在下面讨论多组元素的效果时，我们再来回答这个问题。4.5.2 处理多组元素与一组元素的情况不同，当为不同组的元素应用效果时，这些效果几乎会同时发生。为了示范这种并发的效果，我们可以在向上滑出一个段落时，向下滑入另一个段落。首先，把林肯盖茨堡演说辞剩余的部分添加到HTML中，并把它们分成两段：接着，

27、为了更清楚地看到效果发生期间的变化，我们为第3段和第4段分别添加浅蓝色和淡紫色的背景。同时，在DOM就绪时立即隐藏第 4段：4.5 并发与排队效果 59最后，为第3段添加. click()方法，以便单击它时会将第3段向上滑出视图，同时将第4段向下滑入视图：通过截取到的这两个滑动效果变化过程中的屏幕截图，如图4-10所示，可以证实，它们确实是同时发生的。图 4-10原来可见的浅蓝色段落，正处于向上滑到一半的状态；与此同时，原来隐藏的淡紫色段落，正处于向下滑到一半的状态。回调函数为了对不同元素上的效果实现排队，jQuery提供了回调函数 。同我们在事件处理程序中看到的一样，回调函数就是作为方法的参

28、数传递的一个普通函数。在效果方法中，它们是方法的最后一个参数。当使用回调函数排队两个滑动效果时，可以在第3个段落滑上之前，先将第4个段落滑下。首先，我们看一看怎样通过回调函数设置. slideDown()方法：60 第 4 章 效果为操作添加艺术性不过，这里我们需要注意的是，必须搞清楚要滑上的到底是哪个段落。因为回调函数位于.slideDown()方法中，所以$ (this)的环境已经发生了改变。现在，$ (this)已经不再是指向.click()的第3个段落了由于. slideDown()方法是通过$ (this).next()调用的，所以该方法中的一切现在都将$ (this)视为下一个同辈

29、元素，即第4个段落。因而，如果在回调函数中放入$ (this).slideUp(slow)，那么我们最终还会把刚刚显示出来的段落给隐藏起来。 可靠地引用$ (this)的一种简单方法，就是在. click()方法内部把它保存到一个变量中，比如v ar $thisPara = $(this)。这样，无论是在回调函数的外部还是内部，$ thisPara引用的都是第3个段落。下面是使用了新变量之后的代码：在. slideDown()的回调函数内部使用$ thisPara会创建一个闭包。我们将在附录C 中详细地讨论闭包。这次效果中途的屏幕截图4-11显示，第3段和第4段同时都是可见的，而且，第 4段已

30、经完成下滑，第3段刚要开始上滑。/ 这里的slideUp() 将在slideDown 结束后开始4.6 简单概括 61图 4-11既然讨论了回调函数，那么就可以回过头来解决本章前面要在一系列效果之后改变背景颜色的问题了。这次，我们不采取前面没有成功的连缀. css()的方式，而是把它放到最后一个效果的回调函数中：这样，我们就实现了在按钮淡出到50%的不透明度，慢慢地向右移动 650像素并淡入回100%的不透明度之后，再将按钮的背景变红的效果。4.6 简单概括随着在应用效果时需要考虑的变化的增多，要记住这些效果是同时发生还是按顺序发生会变得越来越困难。因此，下面简单的概括可能会对你有所帮助。(1

31、) 一组元素上的效果： 当在一个. animate()方法中以多个属性的方式应用时，是同时发生的。 当以方法连缀的形式应用时，是按顺序发生的（排队效果） 。(2) 多组元素上的效果： 默认情况下是同时发生的。 当在事件处理程序的回调函数中应用时，是按顺序发生的（排队效果） 。62 第 4 章 效果为操作添加艺术性4.7 小结通过使用本章介绍的效果方法，应该能够使用. css()来渐进地增大或减小文本的大小。也应该能够以不同的方式应用多种效果，以便逐渐地隐藏和显示页面元素。此外，还应该能够通过许多方式，同时地或相继地为多个元素实现动画效果。在本书前面4章中，所有例子都只涉及了操作硬编码到页面的HTML中的元素。在第5章中，我们会探索使用jQuery来创建新元素的方式，以及如何把它们插入到选择的 DOM结构中。