jQuery1.1 API 中文版 第五部分Effects

jQuery1.1 API 中文版 第五部分Effects
url: http://jquery.org.cn/visual/cn/index.xml

第五部分Effects

1. animate(params, speed, easing, callback)
用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

A function for making your own, custom, animations. The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: "height", "top", or "opacity"). The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Oterwise if the string "hide", "show", or "toggle" is provided, a default animation will be constructed for that property.

返回值
jQuery

参数
params (Hash): 一组包含作为动画属性和终值的样式属性和及其值的集合
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing (String): (可选) 要使用的擦除效果的名称(需要插件支持).
callback (Function): (可选) 在动画完成时执行的函数
示例
jQuery 代码:
$("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 
--------------------------------------------------------------------------------

 

jQuery 代码:
$("p").animate({ left: 50, opacity: 'show' }, 500);
 
--------------------------------------------------------------------------------

 

说明:
一个使用“擦除”函数提供不同动画样式的例子。只有在一个插件可以提供这个“擦除”函数（jQuery库中默认只提供“linear”函数）的情况下才有效。

jQuery 代码:
$("p").animate({ opacity: 'show' }, "slow", "easein");

 

2. fadeIn(speed, callback)
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

Fade in all matched elements by adjusting their opacity and firing an optional callback after completion. Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.

返回值
jQuery

参数
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function): (可选) 在动画完成时执行的函数
示例
jQuery 代码:
$("p").fadeIn("slow");
 
--------------------------------------------------------------------------------

 

jQuery 代码:
$("p").fadeIn("slow",function(){ alert("Animation Done."); });

3. fadeOut(speed, callback)
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

Fade out all matched elements by adjusting their opacity and firing an optional callback after completion. Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.

返回值
jQuery

参数
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function): (可选) 在动画完成时执行的函数
示例
jQuery 代码:
$("p").fadeOut("slow");
 
--------------------------------------------------------------------------------

 

jQuery 代码:
$("p").fadeOut("slow",function(){ alert("Animation Done."); });

 

4. fadeTo(speed, opacity, callback)
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion. Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.

返回值
jQuery

参数
speed (String|Number): 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity (Number): 要调整到的不透明度值(0到1之间的数字).
callback (Function): (可选) 在动画完成时执行的函数
示例
jQuery 代码:
$("p").fadeTo("slow", 0.5);
 
--------------------------------------------------------------------------------

 

jQuery 代码:
$("p").fadeTo("slow", 0.5, function(){ alert("Animation Done."); });

 

5. hide()
隐藏显示的元素。

Hides each of the set of matched elements if they are shown.

返回值
jQuery

示例
HTML 代码:
<p>Hello</p>
 
jQuery 代码:
$("p").hide()
 
结果:
[ <p style="display: none">Hello</p> ]

 

6. hide(speed, callback)
以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。

Hide all matched elements using a graceful animation and firing an optional callback after completion. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

返回值
jQuery

参数
speed (String|Number): 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function): (可选) 在动画完成时执行的函数
示例
jQuery 代码:
$("p").hide("slow");
 
--------------------------------------------------------------------------------

 

jQuery 代码:
$("p").hide("slow",function(){ alert("Animation Done."); });

7. show()
显示隐藏的匹配元素。

Displays each of the set of matched elements if they are hidden.

返回值
jQuery

示例
HTML 代码:
<p style="display: none">Hello</p>
 
jQuery 代码:
$("p").show()
 
结果:
[ <p style="display: block">Hello</p> ]

 

8. show(speed, callback)
以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。

Show all matched elements using a graceful animation and firing an optional callback after completion. The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

返回值
jQuery

参数
speed (String|Number): 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function): (可选) 在动画完成时执行的函数
示例
jQuery 代码:
$("p").show("slow");
 
--------------------------------------------------------------------------------

 

jQuery 代码:
$("p").show("slow",function(){ alert("Animation Done."); });

 

9. slideDown(speed, callback)
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

Reveal all matched elements by adjusting their height and firing an optional callback after completion. Only the height is adjusted for this animation, causing all matched elements to be revealed in a "sliding" manner.

返回值
jQuery

参数
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function): (可选) 在动画完成时执行的函数
示例
jQuery 代码:
$("p").slideDown("slow");
 
--------------------------------------------------------------------------------

 

jQuery 代码:
$("p").slideDown("slow",function(){ alert("Animation Done."); });

 

10. slideToggle(speed, callback)
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion. Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

返回值
jQuery

参数
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function): (可选) 在动画完成时执行的函数
示例
jQuery 代码:
$("p").slideToggle("slow");
 
--------------------------------------------------------------------------------

 

jQuery 代码:
$("p").slideToggle("slow",function(){ alert("Animation Done."); });

 

11. slideUp(speed, callback)
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。

Hide all matched elements by adjusting their height and firing an optional callback after completion. Only the height is adjusted for this animation, causing all matched elements to be hidden in a "sliding" manner.

返回值
jQuery

参数
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function): (可选) 在动画完成时执行的函数
示例
jQuery 代码:
$("p").slideUp("slow");
 
--------------------------------------------------------------------------------

 

jQuery 代码:
$("p").slideUp("slow",function(){ alert("Animation Done."); });

 

12. toggle()
切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

Toggles each of the set of matched elements. If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.

返回值
jQuery

示例
HTML 代码:
<p>Hello</p><p style="display: none">Hello Again</p>
 
jQuery 代码:
$("p").toggle()
 
结果:
[ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]