极客教程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 将一个元素的轮廓转移到另一个元素上。 |