jQuery 动效参考

jQuery 动效方法

下表列出了所有重要的 jQuery 动效方法 以创建不同类型的效果。

序号	方法和描述
1	animate( params, [duration, easing, callback] ) 用于创建自定义动画的函数。
2	fadeIn( speed, [callback] ) 通过调整元素的不透明度淡入所有匹配的元素，并在完成后触发可选的回调函数。
3	fadeOut( speed, [callback] ) 通过将匹配的元素的不透明度调整为0，然后将display设置为”none”来淡出所有匹配的元素，并在完成后触发可选的回调函数。
4	fadeTo( speed, opacity, callback ) 将所有匹配的元素的不透明度淡化为指定的不透明度，并在完成后触发可选的回调函数。
5	hide( ) 如果它们被显示，隐藏每个匹配的元素。
6	hide( speed, [callback] ) 使用优雅的动画隐藏所有匹配的元素，并在完成后触发可选的回调函数。
7	show( ) 如果它们被隐藏，显示每个匹配的元素。
8	show( speed, [callback] ) 使用优雅的动画显示所有匹配的元素，并在完成后触发可选的回调函数。
9	slideDown( speed, [callback] ) 通过调整它们的高度来揭示所有匹配的元素，并在完成后触发可选的回调函数。
10	slideToggle( speed, [callback] ) 通过调节高度并在完成后触发可选的回调函数，切换所有匹配元素的可见性。
11	slideUp( speed, [callback] ) 通过调节高度并在完成后触发可选的回调函数，隐藏所有匹配元素。
12	stop( [clearQueue, gotoEnd ]) 停止所有当前正在运行的动画，停止特定元素上的所有动画。
13	toggle( ) 切换显示匹配元素集合中的每个元素。
14	toggle( speed, [callback] ) 使用优雅的动画并在完成后触发可选的回调函数，切换显示匹配元素集合中的每个元素。
15	toggle( 开关 ) 根据开关参数切换显示或隐藏匹配元素集合中的每个元素（true显示所有元素，false隐藏所有元素）。
16	jQuery.fx.off 全局禁用所有动画效果。

基于UI库的效果

要使用这些效果，您可以下载最新的jQuery UI库 jquery-ui-1.11.4.custom.zip ，也可以使用Google CDN以类似我们在使用jQuery时的方式来使用它。您可以从 jQuery UI库进行下载。

我们在HTML页面中使用以下代码段来使用Google CDN提供的jQuery UI:

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

序号	方法与描述
1	Blind 以盲目方式隐藏或显示元素。
2	Bounce 在垂直或水平方向上多次弹跳元素。
3	Clip 垂直或水平方向上将元素裁剪打开或关闭。
4	Drop 以下降或显示的方式将元素放置。
5	Explode 将元素分散成多个片段。
6	Fold 将元素折叠起来，像一张纸一样。
7	Highlight 使用定义的颜色突出显示背景。
8	Puff 缩放和淡出效果创造出膨胀的效果。
9	Pulsate 多次脉动元素的不透明度。
10	Scale 通过百分比因子缩小或增大元素。
11	Shake 在垂直或水平方向上多次抖动元素。
12	Size 将元素调整为指定的宽度和高度。
13	Slide 将元素从视口滑出。
14	Transfer 将一个元素的轮廓转移到另一个元素上。