第09章教案_jQuery特效.doc

《JavaScript与jQuery网页前端开发与设计》教案

第9章jQuery特效

一、教学目标：

掌握jQuery隐藏/显示相关函数hide()、show()和toggle()的用法；

掌握jQuery淡入/淡出相关函数fadeIn()、fadeOut()、fadeToggle()、fadeTo()的用法；

掌握jQuery滑动相关函数slideDown()、slideUp()、slideToggle()的用法；

掌握jQuery动画（Animation）的用法；

掌握jQuery方法链接（Chaining）的用法；

掌握jQuery停止动画相关函数stop()的用法。

二、教学重点和难点：

重点：jQuery常用特效（隐藏/显示、淡入淡出、滑动）；

难点：jQuery动画和方法链接的用法。

三、教学方法与手段：

采取互动式教学方法，理论教学使用多媒体投影教室。

四、课程简介：

本章主要介绍jQuery常用特效，包括jQuery隐藏和显示、淡入和淡出、滑动、动画、方法链接以及停止动画效果。

五、教学基本内容：

9.1jQuery隐藏和显示

jQuery可以控制元素的隐藏和显示，包括自定义变化效果的持续时间。其中hide()方法用于隐藏指定的元素，show()方法用于显示指定的元素。

9.1.1jQueryhide()

jQueryhide()方法用于隐藏指定的HTML元素。其语法结构如下：

$(selector).hide([duration][,callback]);

该方法中selector参数位置可以是任意有效的选择器，hide()方法中的两个参数均为可选。其中duration参数用于设置隐藏动作的持续时间，可以填入“slow”、“fast”或者具体的时间长度（单位默认为毫秒）；callback参数为隐藏动作执行完成后需要下一步执行的函数名称，若无后续函数可省略不填。

使用不带任何参数的hide()方法，可实现无动画效果的隐藏动作。该方法能立刻隐藏处于显示状态的元素，相当于将指定元素的CSS属性设置为“display:none”。例如：

$(p).hide();

该代码表示立刻隐藏文档中所有的段落元素p及其内部所有内容。

带有duration参数值的jQueryhide()方法拥有动画效果。该参数默认单位为毫秒，数值越大代表持续时间越长，则动画效果越慢。其中“fast”默认持续时间是200毫秒，而“slow”默认是600毫秒。

9.1.2jQueryshow()

jQueryshow()方法用于显示指定元素。其语法结构如下：

$(selector).show([duration][,callback]);

同jQueryhide()方法类似，该方法中selector参数位置可以是任意有效的选择器，show()方法中的两个参数均为可选，duration参数用于设置显示的持续时间，可填入“slow”、“fast”或者具体的时间长度（单位默认为毫秒）；callback参数为显示动作执行完成后需要下一步执行的函数名称，若无后续函数可省略不填。

使用不带任何参数的show()方法，可实现无动画效果的显示动作。该方法能立刻显示处于隐藏状态的元素。例如：

$(p).show();

该代码表示立刻显示文档中所有的段落元素p及其内部所有内容。

带有duration参数值的jQueryshow()方法拥有动画效果。该参数默认单位为毫秒，数值越大代表持续时间越长，则动画效果越慢。其中“fast”默认持续时间是200毫秒，而“slow”默认是600毫秒。

【例9-1】jQuery隐藏和显示的应用

分别使用无参数和带有duration参数值的hide()和show()方法，测试元素的隐藏和显示效果。

9.1.3jQuerytoggle()

jQuerytoggle()方法用于切换元素的隐藏和显示。该方法可以替代hide()和show()方法单独使用，用于显示已隐藏的元素，或隐藏正在显示的元素。

【例9-2】jQuery隐藏/显示切换的应用

使用toggle()方法切换元素的隐藏/显示效果。

9.2jQuery淡入和淡出

jQuery可以控制元素的透明度，使元素颜色加深或者淡化。相关方法有如下4种：

fadeIn()：通过更改元素的透明度逐渐加深元素颜色，直至元素完全显现，又称为淡入。

fadeOut()：通过更改元素的透明度逐渐淡化元素颜色，直至元素完全隐藏，又称为淡出。

fadeToggle()：元素淡出淡入效果切换，可用于淡入隐藏的元素，也可用于淡出可见的元素

fadeTo()：用于将元素变为指定的透明度（数值介于0-1之间）

9.2.1jQueryfadeIn()

jQuery