网页特效设计基础第5章-jQuery中的事件处理和动画效果.ppt

1、刘刚刘刚 主编主编新一代信息技术“十三五”系列规划教材 第第5 5章章 jQuery jQuery中的事件处理和动画效果中的事件处理和动画效果 人们常说人们常说“事件是脚本语言的灵魂事件是脚本语言的灵魂”，事件使页面具有，事件使页面具有了动态性和响应性，如果没有事件将很难完成页面与用户之了动态性和响应性，如果没有事件将很难完成页面与用户之间的交互。在传统的间的交互。在传统的 JavaScript 中内置了一些事件响应的中内置了一些事件响应的方式，但是方式，但是 jQuery 增强、优化并扩展了基本的事件处理机增强、优化并扩展了基本的事件处理机制。制。5.1 jQuery 5.1 jQuery

2、中的事件处理中的事件处理 5.1.1 5.1.1 页面加载响应事件页面加载响应事件$(document).ready()$(document).ready()方法是事件模块中最重要的方法是事件模块中最重要的一个函数，它极大地提高了一个函数，它极大地提高了 Web Web 响应速度。响应速度。$(document)$(document)是获取整个文档对象，从这个方法名称来理解，就是获取是获取整个文档对象，从这个方法名称来理解，就是获取就绪的文档。就绪的文档。方法的书写格式为：方法的书写格式为：$(document).ready(function()$(document).ready(functi

3、on()/在这里写代码在这里写代码 ););可以简写成：可以简写成：$().ready(function()$().ready(function()/在这里写代码在这里写代码 ););当当$()$()不带参数时，默认的参数就是不带参数时，默认的参数就是 document document，所以所以$()$()是是$(document)$(document)的简写形式。的简写形式。还可以进一步简写成：还可以进一步简写成：$(function()$(function()/在这里写代码在这里写代码 ););通过上面的介绍可以看出，在通过上面的介绍可以看出，在 jQuery jQuery 中，可以使用

4、中，可以使用$(document).ready()$(document).ready()方法代替传统的方法代替传统的 window.onload()window.onload()方法，不过两者之间还是有些细微的区别的，主要表示在以方法，不过两者之间还是有些细微的区别的，主要表示在以下两方面。下两方面。（1 1）在一个页面上可以无限制地使用）在一个页面上可以无限制地使用$(document).ready()$(document).ready()方法，各个方法间并不冲突，会按照在代码中的顺序依次执方法，各个方法间并不冲突，会按照在代码中的顺序依次执行。而行。而 window.onload()win

5、dow.onload()方法在一个页面中只能使用一次。方法在一个页面中只能使用一次。（2 2）在一个文档完全下载到浏览器时（包括所有关联的文）在一个文档完全下载到浏览器时（包括所有关联的文件，如图片、横幅等）就会响应件，如图片、横幅等）就会响应 window.onload()window.onload()方法。方法。而而$(document).ready()$(document).ready()方法是在所有的方法是在所有的 DOM DOM 元素完全就元素完全就绪以后就可以调用，不包括关联的文件。绪以后就可以调用，不包括关联的文件。5.1.2 jQuery 5.1.2 jQuery 中的事件中的

6、事件 只有页面加载显然是不够的，程序在其他的时候也需只有页面加载显然是不够的，程序在其他的时候也需要完成某个任务。比如鼠标单击（要完成某个任务。比如鼠标单击（onclickonclick）事件、敲击）事件、敲击键盘（键盘（onkeypressonkeypress）事件以及失去焦点（）事件以及失去焦点（onbluronblur）事件）事件等。等。在不同的浏览器中事件名称是不同的，例如，在在不同的浏览器中事件名称是不同的，例如，在IEIE浏浏览器中的事件名称大部分都含有览器中的事件名称大部分都含有 on on，例如，例如 onkeypress()onkeypress()事件，但是在火狐浏览器却没有

7、这个事件名称，事件，但是在火狐浏览器却没有这个事件名称，jQueryjQuery统统一了所有事件的名称。一了所有事件的名称。jQuery jQuery 中的事件如表中的事件如表 5-1 5-1 所示。所示。表表 5-1 jQuery 中的事件中的事件续表续表5.1.3 5.1.3 事件绑定事件绑定 在页面加载完毕时，程序可以通过为元素绑定事件在页面加载完毕时，程序可以通过为元素绑定事件完成相应的操作。在完成相应的操作。在 jQuery jQuery 中，事件绑定通常可以分中，事件绑定通常可以分为元素绑定事件、移除绑定事件和绑定一次性事件处理为元素绑定事件、移除绑定事件和绑定一次性事件处理 3

8、3 种情况。种情况。1 1bind bind 为元素绑定事件为元素绑定事件 在在 jQuery jQuery 中，为元素绑定事件可以使用中，为元素绑定事件可以使用 bind()bind()方法，该方法的语法结构如下：方法，该方法的语法结构如下：bind(type,data,fn)bind(type,data,fn)p typetype：事件类型，表：事件类型，表 5-1 5-1（jQuery jQuery 中的事件）中所中的事件）中所列举的事件。列举的事件。p datadata：可选参数，作为：可选参数，作为 event.data event.data 属性值传递给属性值传递给事件对象的额外数

9、据对象。大多数的情况下不使用该事件对象的额外数据对象。大多数的情况下不使用该参数。参数。p fnfn：绑定的事件处理程序。：绑定的事件处理程序。p 在在 3.0 3.0 版本被废弃使用。版本被废弃使用。2 2unbind unbind 移除绑定移除绑定 在在jQueryjQuery中，为元素移除绑定事件可以使用中，为元素移除绑定事件可以使用unbind()unbind()方法，该方法的语法结构如下：方法，该方法的语法结构如下：unbind(type,data)unbind(type,data)p typetype：可选参数，用于指定事件类型。：可选参数，用于指定事件类型。p datadata：

10、可选参数，用于指定要从每个匹配元素的事件中：可选参数，用于指定要从每个匹配元素的事件中反绑定的事件处理函数。反绑定的事件处理函数。p 在在 3.0 3.0 版本被废弃使用。版本被废弃使用。3 3one one 绑定一次性事件处理绑定一次性事件处理 在在 jQuery jQuery 中，为元素绑定一次性事件处理可以使中，为元素绑定一次性事件处理可以使用用 one()one()方法。方法。one()one()方法为每一个匹配元素的特定事方法为每一个匹配元素的特定事件（如件（如clickclick）绑定一个一次性的事件处理函数。在每）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被

11、执行一次。其他规个对象上，这个事件处理函数只会被执行一次。其他规则与则与 bind()bind()函数相同。这个事件处理函数会接收到一函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回件处理函数必须返回 false false。该方法的语法结构如下：该方法的语法结构如下：one(type,data,fn)one(type,data,fn)p typetype：用于指定事件类型。：用于指定事件类型。

12、p datadata：可选参数，作为：可选参数，作为 event.data event.data 属性值传递给属性值传递给事件对象的额外数据对象。事件对象的额外数据对象。p fnfn：绑定到每个匹配元素的事件上面的处理函数。：绑定到每个匹配元素的事件上面的处理函数。4 4on on 绑定一次或多次事件处理绑定一次或多次事件处理 在在 jQuery jQuery 中，为元素绑定一个或多个事件处理可中，为元素绑定一个或多个事件处理可以使用以使用 on()on()方法。方法。on()on()方法绑定事件处理程序到当前选方法绑定事件处理程序到当前选定的定的 jQuery jQuery 对象中的元素，在

13、对象中的元素，在 jQuery 1.7 jQuery 1.7 版本中添版本中添加了该方法。该方法的语法结构如下：加了该方法。该方法的语法结构如下：on(events,selector,data,fn)on(events,selector,data,fn)p eventsevents：一个或多个用空格分隔的事件类型和可选的：一个或多个用空格分隔的事件类型和可选的命名空间，如命名空间，如clickclick事件。事件。p selectorselector：可选参数。：可选参数。p datadata：当一个事件被触发时要传递：当一个事件被触发时要传递 event.data event.data 给事

14、给事件处理函数。件处理函数。p fnfn：该事件被触发时执行的函数。当：该事件被触发时执行的函数。当 fn=false fn=false 时可时可以做一个函数的简写，返回值为以做一个函数的简写，返回值为 false false。5 5off off 移除一次或多次事件处理移除一次或多次事件处理 在在 jQuery jQuery 中，在选择元素上移除一个或多个事件的事中，在选择元素上移除一个或多个事件的事件处理函数时可以使用件处理函数时可以使用 off()off()方法，可以用方法，可以用 off()off()方法移方法移除用除用.on().on()绑定的事件处理程序，在绑定的事件处理程序，在

15、jQuery 1.7 jQuery 1.7 版本中添版本中添加了该方法。该方法的语法结构如下：加了该方法。该方法的语法结构如下：off(events,selector,fn)off(events,selector,fn)p eventsevents：一个或多个用空格分隔的事件类型和可选的命名：一个或多个用空格分隔的事件类型和可选的命名空间，如空间，如clickclick事件。事件。p selectorselector：一个最初传递到：一个最初传递到.on().on()事件处理程序附加的选事件处理程序附加的选择器。择器。p fnfn：事件处理程序函数以前附加事件上，或特殊值：事件处理程序函数以前

16、附加事件上，或特殊值 false false。5.1.4 5.1.4 模拟用户操作模拟用户操作 在在 jQuery jQuery 中提供了模拟用户的操作触发事件、模中提供了模拟用户的操作触发事件、模仿悬停事件和模拟鼠标连续单击事件仿悬停事件和模拟鼠标连续单击事件 3 3 种模拟用户操作种模拟用户操作的方法。的方法。1 1模拟用户的操作触发事件模拟用户的操作触发事件 在在 jQuery jQuery 中一般常用中一般常用 triggerHandler()triggerHandler()方法和方法和 trigger()trigger()方法来模拟用户的操作触发事件。例如，可以方法来模拟用户的操作触

17、发事件。例如，可以使用下面的代码来触发使用下面的代码来触发 id id 为为 button button 的按钮的的按钮的 click click 事件。事件。$(#button).trigger(click);$(#button).trigger(click);TriggerHandler()TriggerHandler()方法的语法格式与方法的语法格式与 trigger()trigger()方法完全相同。所不同的是：方法完全相同。所不同的是：triggerHandler()triggerHandler()方法方法不会导致浏览器同名的默认行为被执行，而不会导致浏览器同名的默认行为被执行，而

18、trigger()trigger()方法会导致浏览器同名的默认行为的执行。例如，使用方法会导致浏览器同名的默认行为的执行。例如，使用 trigger()trigger()触发一个名称为触发一个名称为 submit submit 的事件，同样会导的事件，同样会导致浏览器执行提交表单的操作。要阻止浏览器的默认行致浏览器执行提交表单的操作。要阻止浏览器的默认行为，只需要返回为，只需要返回falsefalse。另外，使用。另外，使用 trigger()trigger()方法和方法和 triggerHandler()triggerHandler()方法还可以触发方法还可以触发 bind()bind()绑

19、定的自定绑定的自定义事件，并且还可以为事件传递参数。义事件，并且还可以为事件传递参数。2 2模仿悬停事件模仿悬停事件 模仿悬停事件是指模仿鼠标指针移动到一个对象上模仿悬停事件是指模仿鼠标指针移动到一个对象上面又从该对象上面移出的事件，可以通过面又从该对象上面移出的事件，可以通过 jQuery jQuery 提供提供的的hover(over,out)hover(over,out)方法实现。方法实现。hover()hover()方法的语法结方法的语法结构如下：构如下：hover(over,out)hover(over,out)p overover：用于指定当鼠标指针在移动到匹配元素上时触：用于指定

20、当鼠标指针在移动到匹配元素上时触发的函数。发的函数。p outout：用于指定当鼠标指针在移出匹配元素上时触发：用于指定当鼠标指针在移出匹配元素上时触发的函数。的函数。当鼠标指针移动到一个匹配的元素上面时，会触发当鼠标指针移动到一个匹配的元素上面时，会触发指定的第指定的第 1 1 个函数。当鼠标指针移出这个元素时，会个函数。当鼠标指针移出这个元素时，会触发指定的第触发指定的第 2 2 个函数。而且，会伴随着对鼠标指针个函数。而且，会伴随着对鼠标指针是否仍然处在特定元素中的检测（例如，处在是否仍然处在特定元素中的检测（例如，处在 div div 的的图像中），如果是，则会继续保持图像中），如果是

21、，则会继续保持“悬停悬停”状态，而不状态，而不触发移出事件。触发移出事件。5.1.5 5.1.5 事件捕获与事件冒泡事件捕获与事件冒泡 事件捕获和事件冒泡都是一种事件模型，事件捕获和事件冒泡都是一种事件模型，DOM DOM 标准规标准规定应该同时使用这两个模型：首先事件要从定应该同时使用这两个模型：首先事件要从 DOM DOM树顶层的树顶层的元素到元素到 DOM DOM 树底层的元素进行捕获，然后再通过事件冒泡树底层的元素进行捕获，然后再通过事件冒泡返回到返回到 DOM DOM 树的顶层。树的顶层。在标准事件模型中，事件处理程序既可以注册到事件在标准事件模型中，事件处理程序既可以注册到事件捕获

22、阶段，也可以注册到事件冒泡阶段。但是并不是所有捕获阶段，也可以注册到事件冒泡阶段。但是并不是所有的浏览器都支持标准的事件模型，大部分浏览器默认都把的浏览器都支持标准的事件模型，大部分浏览器默认都把事件注册在事件冒泡阶段，所以事件注册在事件冒泡阶段，所以 jQuery jQuery 始终会在事件冒始终会在事件冒泡阶段注册事件处理程序。泡阶段注册事件处理程序。1 1什么是事件捕获与事件冒泡什么是事件捕获与事件冒泡 图图 5-7 5-7、图、图 5-8 5-8 和图和图 5-9 5-9 展示了鼠标指针在不展示了鼠标指针在不同元素上悬停时的效果。同元素上悬停时的效果。图图 5-6 页面结构页面结构 图

23、图 5-7 鼠标指针悬停在鼠标指针悬停在 span 元素上的效果元素上的效果图图 5-8 鼠标指针悬停在鼠标指针悬停在 p 元素上的效果元素上的效果 图图 5-9 鼠标指针悬停在鼠标指针悬停在 div 元素上的效果元素上的效果 从上面的运行结果中可以看到，当鼠标指针在从上面的运行结果中可以看到，当鼠标指针在spanspan元素元素上时，上时，3 3个元素都被加上了红色边框。说明在响应个元素都被加上了红色边框。说明在响应spanspan元素元素的的mouseovermouseover事件的同时，其他两个元素的事件的同时，其他两个元素的mouseovermouseover事件事件也被响应。触发也被

24、响应。触发spanspan元素的事件时，浏览器最先响应的将是元素的事件时，浏览器最先响应的将是spanspan元素的事件，其次是元素的事件，其次是p p元素，最后是元素，最后是divdiv元素。在浏览器元素。在浏览器中事件响应的顺序如图中事件响应的顺序如图5-105-10所示。这种事件的响应顺序就叫所示。这种事件的响应顺序就叫做事件冒泡。事件冒泡是从做事件冒泡。事件冒泡是从DOMDOM树的顶层向下进行事件响应。树的顶层向下进行事件响应。另一种相反的策略就是事件捕获，事件捕获是从另一种相反的策略就是事件捕获，事件捕获是从DOM DOM 树树的底层向上进行事件响应，事件捕获的顺序如图的底层向上进行

25、事件响应，事件捕获的顺序如图5-115-11所示。所示。图图 5-10 事件冒泡（由具体到一般）事件冒泡（由具体到一般）图图 5-11 事件捕获（由一般到具体）事件捕获（由一般到具体）2 2事件对象事件对象 通常情况下，在不同浏览器中获取事件对象是比较通常情况下，在不同浏览器中获取事件对象是比较困难的。针对这个问题，困难的。针对这个问题，jQuery jQuery 进行了必要的处理，进行了必要的处理，使得在任何浏览器中都能轻松地获取事件对象以及事件使得在任何浏览器中都能轻松地获取事件对象以及事件对象的一些属性。对象的一些属性。在程序中使用事件对象非常的简单，只要为函数添在程序中使用事件对象非常

26、的简单，只要为函数添加一个参数即可。加一个参数即可。具体具体 jQuery jQuery 代码如下：代码如下：$(element).bind(mouseout,function(event)/event$(element).bind(mouseout,function(event)/event：事件对象事件对象 /省略部分代码省略部分代码 )当单击当单击“element”“element”元素时，事件对象就被创建，元素时，事件对象就被创建，该事件对象只有事件处理函数才可以访问到。事件处理该事件对象只有事件处理函数才可以访问到。事件处理函数执行完毕后，事件对象就被销毁了。函数执行完毕后，事件对象

27、就被销毁了。3 3阻止事件冒泡阻止事件冒泡 事件冒泡会经常导致一些令开发人员头疼的问题，所以事件冒泡会经常导致一些令开发人员头疼的问题，所以必要的时候，需要阻止事件的冒泡。要解决这个问题，就必必要的时候，需要阻止事件的冒泡。要解决这个问题，就必须访问事件对象。事件对象提供了一个须访问事件对象。事件对象提供了一个stopPropagation()stopPropagation()方法，使用该方法可以阻止事件冒泡。方法，使用该方法可以阻止事件冒泡。阻止例阻止例 5-5 5-5 的程序的事件冒泡，可以在每个事件的程序的事件冒泡，可以在每个事件处理程序中加入一句代码，例如：处理程序中加入一句代码，例如

28、：$(.test1).mouseover(function(event)$(.test1).mouseover(function(event)$(.test1).addClass(redBorder);$(.test1).addClass(redBorder);event.stopPropagation();/event.stopPropagation();/阻止冒泡事件阻止冒泡事件 ););由于由于 stopPropagation()stopPropagation()方法是跨浏览器的，所方法是跨浏览器的，所以不必担心它的兼容性。以不必担心它的兼容性。添加了阻止事件冒泡代码的例添加了阻止事件冒

29、泡代码的例 5-5 5-5 的运行效果如图的运行效果如图 5-12 5-12 所示。所示。当鼠标指针在当鼠标指针在 span span 元素上时，只有元素上时，只有 span span 元素被元素被加上了红色边框，说明只有加上了红色边框，说明只有 span span 元素响应元素响应 mouseover mouseover 事件，程序成功阻止了事件冒泡。事件，程序成功阻止了事件冒泡。图图 5-12 阻止事件冒泡后的效果阻止事件冒泡后的效果4 4阻止浏览器默认行为阻止浏览器默认行为 网页中的元素有自己的默认行为，例如，在表单验证网页中的元素有自己的默认行为，例如，在表单验证的时候，表单的某些内容

30、没有通过验证，但是在单击了提的时候，表单的某些内容没有通过验证，但是在单击了提交按钮以后表单还是会提交。这时就需要阻止浏览器的默交按钮以后表单还是会提交。这时就需要阻止浏览器的默认操作。在认操作。在 jQuery jQuery 中，应用中，应用 preventDefault()preventDefault()方法方法可以阻止浏览器的默认行为。可以阻止浏览器的默认行为。在事件处理程序中加入下面代码就可以阻止默认行为：在事件处理程序中加入下面代码就可以阻止默认行为：event.preventDefault()/event.preventDefault()/阻止浏览器默认操作阻止浏览器默认操作 如果

31、想同时停止事件冒泡和浏览器默认行为，可以在事如果想同时停止事件冒泡和浏览器默认行为，可以在事件处理程序中返回件处理程序中返回 false false。即：。即：return false;/return false;/阻止事件冒泡和浏览器默认操作阻止事件冒泡和浏览器默认操作 这是同时调用这是同时调用stopPropagation()stopPropagation()和和preventDefault()preventDefault()方法的一种简要写法。方法的一种简要写法。5 5事件对象的属性事件对象的属性 在在 jQuery jQuery 中对事件属性也进行了封装，使得事件中对事件属性也进行了封

32、装，使得事件处理在各大浏览器下都可以正常运行而不需要对浏览器处理在各大浏览器下都可以正常运行而不需要对浏览器类型进行判断。类型进行判断。（1 1）event.typeevent.type。（2 2）event.preventDefault()event.preventDefault()方法是阻止默认的事件方法是阻止默认的事件行为，行为，event.stopPrepagation()event.stopPrepagation()方法是用来阻止事件方法是用来阻止事件冒泡的。冒泡的。（3 3）event.targetevent.target。（4 4）event.relatedTargetevent

33、.relatedTarget。（5 5）event.pageX event.pageX 和和 event.pageY event.pageY。5.2 jQuery 5.2 jQuery 中的动画效果中的动画效果 基本的动画效果指的是元素的隐藏和显示。在基本的动画效果指的是元素的隐藏和显示。在 jQuery jQuery 中提供了两种控制元素隐藏和显示的方法，一种是分别隐藏中提供了两种控制元素隐藏和显示的方法，一种是分别隐藏和显示匹配元素，另一种是切换元素的可见状态，也就是如和显示匹配元素，另一种是切换元素的可见状态，也就是如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为果元素是可见的，切

34、换为隐藏；如果元素是隐藏的，切换为可见的。可见的。5.2.1 5.2.1 隐藏匹配元素隐藏匹配元素 使用使用 hide()hide()方法可以隐藏匹配的元素。方法可以隐藏匹配的元素。hide()hide()方方法相当于将元素法相当于将元素 CSS CSS 样式属性样式属性 display display 的值设置为的值设置为 nonenone，它会记住原来的，它会记住原来的 display display 的值。的值。hide()hide()方法有方法有两种语法格式，一种是不带参数的形式，用于实现不带两种语法格式，一种是不带参数的形式，用于实现不带任何效果的隐藏匹配元素，其语法格式如下：任何效

35、果的隐藏匹配元素，其语法格式如下：hide()hide()另一种是带参数的形式，用于以优雅的动画隐藏所有另一种是带参数的形式，用于以优雅的动画隐藏所有匹配的元素，并在隐藏完成后可选地触发一个回调函数，匹配的元素，并在隐藏完成后可选地触发一个回调函数，其语法格式如下：其语法格式如下：hide(speed,callback)hide(speed,callback)p speedspeed：用于指定动画的时长。可以是数字，也就是元：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（素经过多少毫秒（1000 1000 毫秒毫秒=1=1 秒）后完全隐藏。也可秒）后完全隐藏。也可以是默认参数以是默认

36、参数 slow slow（600 600 毫秒）、毫秒）、normalnormal（400 400 毫秒）毫秒）和和 fast fast（200 200 毫秒）。毫秒）。p callbackcallback：可选参数，用于指定隐藏完成后要触发的回：可选参数，用于指定隐藏完成后要触发的回调函数。调函数。5.2.2 5.2.2 显示匹配元素显示匹配元素 使用使用 show()show()方法可以显示匹配的元素。方法可以显示匹配的元素。show()show()方方法相当于将元素法相当于将元素 CSS CSS 样式属性样式属性 display display 的值设置为的值设置为 block bloc

37、k 或或inline inline 或除了或除了 none none 以外的值，它会恢复为以外的值，它会恢复为应用应用 display:none display:none 之前的可见属性。之前的可见属性。show()show()方法有方法有两种语法格式，一种是不带参数的形式，用于实现不带两种语法格式，一种是不带参数的形式，用于实现不带任何效果的显示匹配元素，其语法格式如下：任何效果的显示匹配元素，其语法格式如下：show()show()另一种是带参数的形式，用于以优雅的动画显示所有另一种是带参数的形式，用于以优雅的动画显示所有匹配的元素，并在显示完成后可选择地触发一个回调函数，匹配的元素，并在

38、显示完成后可选择地触发一个回调函数，其语法格式如下：其语法格式如下：show(speed,callback)show(speed,callback)p speedspeed：用于指定动画的时长。可以是数字，也就是元：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（素经过多少毫秒（1000 1000 毫秒毫秒=1=1 秒）后完全显示。也秒）后完全显示。也可以是默认参数可以是默认参数 slow slow（600 600 毫秒）、毫秒）、normalnormal（400 400 毫毫秒）和秒）和 fast fast（200 200 毫秒）。毫秒）。p callbackcallback：可选参

39、数，用于指定显示完成后要触发的：可选参数，用于指定显示完成后要触发的回调函数。回调函数。5.2.3 5.2.3 切换元素的可见状态切换元素的可见状态 使用使用 toggle()toggle()方法可以切换元素的可见状态，也方法可以切换元素的可见状态，也就是说如果元素是可见的，切换为隐藏；如果元素是隐就是说如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见。藏的，切换为可见。toggle()toggle()方法的语法格式如下：方法的语法格式如下：toggle();toggle();5.2.4 5.2.4 淡入淡出的动画效果淡入淡出的动画效果 如果在显示或隐藏元素时不需要改变元素的高度和宽

40、如果在显示或隐藏元素时不需要改变元素的高度和宽度，只单独改变元素的透明度的时候，就需要使用淡入淡度，只单独改变元素的透明度的时候，就需要使用淡入淡出的动画效果了。出的动画效果了。jQueryjQuery中提供了表中提供了表5-25-2所示的实现淡入所示的实现淡入淡出动画效果的方法。淡出动画效果的方法。表表 5-2 实现淡入淡出动画效果的方法实现淡入淡出动画效果的方法 这这 3 3 种方法都可以为其指定速度参数，参数的规种方法都可以为其指定速度参数，参数的规则与则与 hide()hide()方法和方法和 show()show()方法的速度参数一致。在使方法的速度参数一致。在使用用fadeTo()

41、fadeTo()方法指定不透明度时，参数只能是方法指定不透明度时，参数只能是 0 0 到到 1 1 之间的数字，之间的数字，0 0 表示完全透明，表示完全透明，1 1 表示完全不透明，数表示完全不透明，数值越小图片的可见性就越差。值越小图片的可见性就越差。5.2.5 5.2.5 滑动效果滑动效果 在在 jQuery jQuery 中，提供了中，提供了 slideDown()slideDown()方法（用于滑方法（用于滑动显示匹配的元素）、动显示匹配的元素）、slideUp()slideUp()方法（用于滑动隐藏匹方法（用于滑动隐藏匹配的元素）和配的元素）和 slideToggle()slide

42、Toggle()方法（用于通过高度的变方法（用于通过高度的变化动态切换元素的可见性）来实现滑动效果。化动态切换元素的可见性）来实现滑动效果。1 1滑动显示匹配的元素滑动显示匹配的元素 使用使用 slideDown()slideDown()方法可以向下增加元素高度，动方法可以向下增加元素高度，动态显示匹配的元素。态显示匹配的元素。slideDown()slideDown()方法会逐渐向下增加匹方法会逐渐向下增加匹配的隐藏元素的高度，直到元素完全显示为止。配的隐藏元素的高度，直到元素完全显示为止。slideDown()slideDown()方法的语法格式如下：方法的语法格式如下：slideDown

43、(speed,callback)slideDown(speed,callback)p speedspeed：用于指定动画的时长。可以是数字，也就是元：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（素经过多少毫秒（1000 1000 毫秒毫秒=1=1 秒）后完全显示。也秒）后完全显示。也可以是默认参数可以是默认参数 slow slow（600 600 毫秒）、毫秒）、normalnormal（400 400 毫毫秒）和秒）和 fast fast（200 200 毫秒）。毫秒）。p callbackcallback：可选参数，用于指定显示完成后要触发的：可选参数，用于指定显示完成后要触发

44、的回调函数。回调函数。2 2滑动隐藏匹配的元素滑动隐藏匹配的元素 使用使用 slideUp()slideUp()方法可以向上减少元素高度，动态方法可以向上减少元素高度，动态隐藏匹配的元素。隐藏匹配的元素。slideUp()slideUp()方法会逐渐向上减少匹配的方法会逐渐向上减少匹配的显示元素的高度，直到元素完全隐藏为止。显示元素的高度，直到元素完全隐藏为止。slideUp()slideUp()方方法的语法格式如下：法的语法格式如下：slideUp(speed,callback)slideUp(speed,callback)p speedspeed：用于指定动画的时长。可以是数字，也就是元：

45、用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（素经过多少毫秒（1000 1000 毫秒毫秒=1=1 秒）后完全隐藏。也秒）后完全隐藏。也可以是默认参数可以是默认参数 slow slow（600 600 毫秒）、毫秒）、normalnormal（400 400 毫毫秒）和秒）和 fast fast（200 200 毫秒）。毫秒）。p callbackcallback：可选参数，用于指定隐藏完成后要触发的：可选参数，用于指定隐藏完成后要触发的回调函数。回调函数。3 3通过高度的变化动态切换元素的可见性通过高度的变化动态切换元素的可见性 通过通过 slideToggle()slideTog

46、gle()方法可以实现通过高度的变化方法可以实现通过高度的变化动态切换元素的可见性。在使用动态切换元素的可见性。在使用 slideToggle()slideToggle()方法时，方法时，如果元素是可见的，就通过减小高度使全部元素隐藏，如如果元素是可见的，就通过减小高度使全部元素隐藏，如果元素是隐藏的，就增加元素的高度使元素最终全部可见。果元素是隐藏的，就增加元素的高度使元素最终全部可见。slideToggle()slideToggle()方法的语法格式如下：方法的语法格式如下：slideToggle(speed,callback)slideToggle(speed,callback)p sp

47、eedspeed：用于指定动画的时长。可以是数字，也就是元：用于指定动画的时长。可以是数字，也就是元素经过多少毫秒（素经过多少毫秒（1000 1000 毫秒毫秒=1=1 秒）后完全显示或隐藏。秒）后完全显示或隐藏。也可以是默认参数也可以是默认参数 slow slow（600 600 毫秒）、毫秒）、normalnormal（400 400 毫秒）和毫秒）和 fast fast（200 200 毫秒）。毫秒）。p callbackcallback：可选参数，用于指定动画完成时触发的回调：可选参数，用于指定动画完成时触发的回调函数。函数。5.2.6 5.2.6 自定义的动画效果自定义的动画效果1

48、1使用使用 animate()animate()方法创建自定义动画方法创建自定义动画 animate()animate()方法的操作更加自由，可以随意控制元素方法的操作更加自由，可以随意控制元素的属性，实现更加绚丽的动画效果。的属性，实现更加绚丽的动画效果。jQuery 1.8 jQuery 1.8 版本中版本中加入了该方法。加入了该方法。animate()animate()方法的基本语法格式如下：方法的基本语法格式如下：animate(params,speed,callback)animate(params,speed,callback)p paramsparams：表示一个包含属性和值的映

49、射，可以同时包含：表示一个包含属性和值的映射，可以同时包含多个属性，例如多个属性，例如left:200px,top:100pxleft:200px,top:100px。p speedspeed：表示动画运行的速度，参数规则同其他动画效：表示动画运行的速度，参数规则同其他动画效果的果的 speed speed 一致，它是一个可选参数。一致，它是一个可选参数。p callbackcallback：表示一个回调函数，当动画效果运行完毕后：表示一个回调函数，当动画效果运行完毕后执行该回调函数，它也是一个可选参数。执行该回调函数，它也是一个可选参数。2 2使用使用 stop()stop()方法停止动画方

50、法停止动画 stop()stop()方法也属于自定义动画函数，它会停止匹配方法也属于自定义动画函数，它会停止匹配元素正在运行的动画，并立即执行动画队列中的下一个元素正在运行的动画，并立即执行动画队列中的下一个动画。动画。jQuery 1.7 jQuery 1.7 版本中加入了该方法。版本中加入了该方法。stop()stop()方法方法的语法格式如下：的语法格式如下：stop(clearQueue,gotoEnd)stop(clearQueue,gotoEnd)p clearQueueclearQueue：表示是否清空尚未执行完的动画队列：表示是否清空尚未执行完的动画队列（值为（值为 true