jQuery 效果函数

1.列表

jQuery 效果函数

方法描述animate()对被选元素应用“自定义”的动画clearQueue()对被选元素移除所有排队的函数（仍未运行的）delay()对被选元素的所有排队函数（仍未运行）设置延迟dequeue()运行被选元素的下一个排队函数fadeIn()逐渐改变被选元素的不透明度，从隐藏到可见fadeOut()逐渐改变被选元素的不透明度，从可见到隐藏fadeTo()把被选元素逐渐改变至给定的不透明度hide()隐藏被选的元素queue()显示被选元素的排队函数show()显示被选的元素slideDown()通过调整高度来滑动显示被选元素slideToggle()对被选元素进行滑动隐藏和滑动显示的切换slideUp()通过调整高度来滑动隐藏被选元素stop()停止在被选元素上运行动画toggle()对被选元素进行隐藏和显示的切换

2.jQuery 效果 - animate() 方法

实例

改变 "div" 元素的高度：

$(".btn1").click(function(){  $("#box").animate({height:"300px"});});

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法 1

$(selector).animate(styles,speed,easing,callback)

参数描述styles

必需。规定产生动画效果的 CSS 样式和值。

可能的 CSS 样式值（提供实例）：

• backgroundPosition
• borderWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• borderSpacing
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• outlineWidth
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• height
• width
• maxHeight
• maxWidth
• minHeight
• maxWidth
• font
• fontSize
• bottom
• left
• right
• top
• letterSpacing
• wordSpacing
• lineHeight
• textIndent

注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

speed

可选。规定动画的速度。默认是 "normal"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

easing

可选。规定在不同的动画点中设置动画速度的 easing 函数。

内置的 easing 函数：

• swing
• linear

扩展插件中提供更多 easing 函数。

callback

可选。animate 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 。

语法 2

$(selector).animate(styles,options)

参数描述styles必需。规定产生动画效果的 CSS 样式和值（同上）。options

可选。规定动画的额外选项。

可能的值：

• speed - 设置动画的速度
• easing - 规定要使用的 easing 函数
• callback - 规定动画完成之后要执行的函数
• step - 规定动画的每一步完成之后要执行的函数
• queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
• specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

3.jQuery 效果 - clearQueue() 方法

实例

停止当前正在运行的动画：

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

定义和用法

clearQueue() 方法停止队列中所有仍未执行的函数。

与 stop() 方法不同，（只适用于动画），clearQueue() 能够清除任何排队的函数（通过 .queue() 方法添加到通用 jQuery 队列的任何函数）。

语法

$(selector).clearQueue(queueName)

参数描述queueName

可选。规定要停止的队列的名称。

默认是 "fx"，标准效果队列。

4.jQuery 效果 - fadeIn() 方法

实例

使用淡入效果来显示一个隐藏的 <p> 元素：

$(".btn2").click(function(){  $("p").fadeIn();});

定义和用法

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

语法

$(selector).fadeIn(speed,callback)

参数描述speed

可选。规定元素从隐藏到可见的速度。默认为 "normal"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。

callback

可选。fadeIn 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经显示，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

5.jQuery 效果 - fadeOut() 方法

实例

使用淡出效果来隐藏一个 <p> 元素：

$(".btn1").click(function(){  $("p").fadeOut();});

定义和用法

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

语法

$(selector).fadeOut(speed,callback)

参数描述speed

可选。规定元素从可见到隐藏的速度。默认为 "normal"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。

callback

可选。fadeOut 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

6.jQuery 效果 - fadeTo() 方法

实例

使用淡出效果来隐藏一个 <p> 元素：

$(".btn1").click(function(){  $("p").fadeTo(1000,0.4);});

定义和用法

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

语法

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

参数描述speed

可选。规定元素从当前透明度到指定透明度的速度。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

opacity必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。callback

可选。fadeTo 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

7.jQuery 效果 - hide() 方法

实例

隐藏可见的 <p> 元素：

$(".btn1").click(function(){  $("p").hide();});

定义和用法

如果被选的元素已被显示，则隐藏该元素。

语法

$(selector).hide(speed,callback)

参数描述speed

可选。规定元素从可见到隐藏的速度。默认为 "0"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

callback

可选。hide 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

8.jQuery 效果 - show() 方法

实例

显示出隐藏的 <p> 元素。

$(".btn2").click(function(){  $("p").show();});

定义和用法

如果被选元素已被隐藏，则显示这些元素：

语法

$(selector).show(speed,callback)

参数描述speed

可选。规定元素从隐藏到完全可见的速度。默认为 "0"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

callback

可选。show 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

9.jQuery 效果 - slideDown() 方法

实例

以滑动方式显示隐藏的 <p> 元素：

$(".btn2").click(function(){  $("p").slideDown();});

定义和用法

slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。

语法

$(selector).slideDown(speed,callback)

参数描述speed

可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。

callback

可选。slideDown 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

10.jQuery 效果 - slideToggle() 方法

实例

通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素：

$(".btn1").click(function(){  $("p").slideToggle();});

定义和用法

slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

语法

$(selector).slideToggle(speed,callback)

参数描述speed

可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。

callback

可选。toggle 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

11.jQuery 效果 - slideUp() 方法

实例

以滑动方式隐藏 <p> 元素：

$(".btn1").click(function(){  $("p").slideUp();});

定义和用法

通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。

语法

$(selector).slideUp(speed,callback)

参数描述speed

可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "normal"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度（这样会创造滑动效果）。

callback

可选。slideUp 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

12.jQuery 效果 - stop() 方法

实例

停止当前正在运行的动画：

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

定义和用法

stop() 方法停止当前正在运行的动画。

语法

$(selector).stop(stopAll,goToEnd)

参数描述stopAll可选。规定是否停止被选元素的所有加入队列的动画。goToEnd

可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。

13.jQuery 效果 - toggle() 方法

实例

切换 <p> 元素的显示与隐藏状态：

$(".btn1").click(function(){  $("p").hide();});

定义和用法

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

语法

$(selector).toggle(speed,callback,switch)

参数描述speed

可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数，则无法使用 switch 参数。

callback

可选。toggle 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

switch

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

• True - 显示所有元素
• False - 隐藏所有元素

如果设置此参数，则无法使用 speed 和 callback 参数。

提示和注释

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。