JQuery学习笔记（二）

JQuery学习笔记

 小杭 笔记整理

jQuery 效果隐藏与显示

---

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

亲自试一试

---

语法：

1 2 3

$(selector).hide(speed,callback);    $(selector).show(speed,callback);

下面的例子演示了带有 speed 参数的 hide() 方法：

---

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

1 2 3

$( "button" ).click( function (){    $( "p" ).toggle(); });

亲自试一试

（这个的方法比较好用，可以用来做动态的公告面板什么的隐藏显示的内容）

---

语法：

1	$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

---

(callback这个参数，在制作复杂的效果时，为其事件添加其他的操作是使用，很方便的扩展）

---

---

jQuery 效果 - 淡入淡出

jQuery Fading 方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

• fadeIn()
• fadeOut()
• fadeToggle()  （这个方法比较常用）
• fadeTo()  （淡出到指定透明度）

---

以下参数通用：

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。（display:none）

语法：

1	$(selector).fadeIn(speed,callback);

下面的例子演示了带有不同参数的 fadeIn() 方法：

实例

1 2 3 4 5

$( "button" ).click( function (){    $( "#div1" ).fadeIn();    $( "#div2" ).fadeIn( "slow" );    $( "#div3" ).fadeIn(3000); });

亲自试一试

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

$(selector).fadeOut(speed,callback);

下面的例子演示了带有不同参数的 fadeOut() 方法：

亲自试一试

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：

1	$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

实例

1 2 3 4 5

$( "button" ).click( function (){    $( "#div1" ).fadeToggle();    $( "#div2" ).fadeToggle( "slow" );    $( "#div3" ).fadeToggle(3000); });

亲自试一试

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

1	$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

下面的例子演示了带有不同参数的 fadeTo() 方法：

实例

1 2 3 4 5

$( "button" ).click( function (){    $( "#div1" ).fadeTo( "slow" ,0.15);    $( "#div2" ).fadeTo( "slow" ,0.4);    $( "#div3" ).fadeTo( "slow" ,0.7); });

亲自试一试

---

jQuery 效果 - 滑动

这个东东的效果就是在淡入淡出隐藏显示之上，在过程中实现滑动的效果；

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

• slideDown()
• slideUp()
• slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

1	$(selector).slideDown(speed,callback);

亲自试一试

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

1	$(selector).slideUp(speed,callback);

亲自试一试

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

1 2 3

$( "#flip" ).click( function (){    $( "#panel" ).slideUp(); });

实例

1 2 3

$( "#flip" ).click( function (){    $( "#panel" ).slideToggle(); });

亲自试一试

jQuery 效果 - 动画

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法：

1	$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

实例

1 2 3

$( "button" ).click( function (){    $( "div" ).animate({left: '250px' }); });

这个例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

亲自试一试

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

 

jQuery animate() - 操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

实例

1 2 3 4 5 6 7 8

$( "button" ).click( function (){    $( "div" ).animate({      left: '250px' ,      opacity: '0.5' ,      height: '150px' ,      width: '150px'    }); });

亲自试一试

提示：可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

实例

1 2 3 4 5 6 7

$( "button" ).click( function (){    $( "div" ).animate({      left: '250px' ,      height: '+=150px' ,      width: '+=150px'    }); });

亲自试一试

jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

实例 

下面的例子把 <div> 元素移动到右边，然后增加文本的字号：

1 2 3 4 5

$( "button" ).click( function (){    var  div=$( "div" );    div.animate({left: '100px' }, "slow" );    div.animate({fontSize: '3em' }, "slow" ); });

亲自试一试

---

jQuery 停止动画

---

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

（这个方法如果动画的过程过快就没办法使用手动出发来实现）

---

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

---

实例

1 2 3

$( "#stop" ).click( function (){    $( "#panel" ).stop(); });

亲自试一试

---

 Chaining

---

通过 jQuery，您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

---

例子 1

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：

1	$( "#p1" ).css( "color" , "red" ).slideUp(2000).slideDown(2000);

亲自试一试

例子 2

这样写也可以运行：

1 2 3

$( "#p1" ).css( "color" , "red" )    .slideUp(2000)    .slideDown(2000);

亲自试一试

jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。

---

---

小结

    到这里，已经可以使用jQuery效果来做一些不错的动态的效果了；以上的方法效果只是其中的一些，jQuery还有很多的方法，可以参阅j完整的Query文档；

    把动画的效果用好，这个效果足以来做一些简单的非常美观的动态的网页了；