jQuery UI API 类别 - 特效（Effects）

蔚落 2024-03-24 12:06 33阅读 0赞

jQuery UI 在jQuery 内置的特效上添加了一些功能。jQuery UI 支持颜色动画和 Class 转换，同时也提供了一些额外的 [Easings][]。另外，提供了一套完整的定制特效，供显示和隐藏元素时或者只是添加一些视觉显示时使用。

<table> 
 <tbody> 
  <tr> 
   <th>API</th> 
   <th>描述</th> 
   <th>也属于类别</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-addClass.html" title=".addClass()" rel="nofollow">.addClass()</a></td> 
   <td>当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class。</td> 
   <td><a href="https://www.runoob.com/jqueryui/ref-effects-core.html" title="特效核心（Effects Core）" rel="nofollow">特效核心（Effects Core）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-overrides.html" title="方法重载（Method Overrides）" rel="nofollow">方法重载（Method Overrides）</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-blind-effect.html" title="百叶窗特效（Blind Effect）" rel="nofollow">百叶窗特效（Blind Effect）</a></td> 
   <td>百叶窗特效（Blind Effect）通过将元素包裹在一个容器内，采用"拉百叶窗"效果来隐藏或显示元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-bounce-effect.html" title="反弹特效（Bounce Effect）" rel="nofollow">反弹特效（Bounce Effect）</a></td> 
   <td>反弹特效（Bounce Effect）反弹一个元素。当与隐藏或显示一起使用时，最后一次或第一次反弹会呈现淡入/淡出效果。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-clip-effect.html" title="剪辑特效（Clip Effect）" rel="nofollow">剪辑特效（Clip Effect）</a></td> 
   <td>剪辑特效（Clip Effect）通过垂直或水平方向夹剪元素来隐藏或显示一个元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-color-animation.html" title="颜色动画（Color Animation）" rel="nofollow">颜色动画（Color Animation）</a></td> 
   <td>使用 .animate() 实现颜色动画效果。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-drop-effect.html" title="降落特效（Drop Effect）" rel="nofollow">降落特效（Drop Effect）</a></td> 
   <td>降落特效（Drop Effect）通过单个方向滑动的淡入淡出来隐藏或显示一个元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-easings.html" title="Easings" rel="nofollow">Easings</a></td> 
   <td>Easing 函数指定动画在不同点上的行进速度。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-effect.html" title=".effect()" rel="nofollow">.effect()</a></td> 
   <td>对一个元素应用动画特效。</td> 
   <td><a href="https://www.runoob.com/jqueryui/ref-effects-core.html" title="特效核心（Effects Core）" rel="nofollow">特效核心（Effects Core）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-methods.html" title="方法（Method）" rel="nofollow">方法（Method）</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-explode-effect.html" title="爆炸特效（Explode Effect）" rel="nofollow">爆炸特效（Explode Effect）</a></td> 
   <td>爆炸特效（Explode Effect）通过把元素裂成碎片来隐藏或显示一个元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-fade-effect.html" title="淡入淡出特效（Fade Effect）" rel="nofollow">淡入淡出特效（Fade Effect）</a></td> 
   <td>淡入淡出特效（Fade Effect）通过淡入淡出元素来隐藏或显示一个元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-fold-effect.html" title="折叠特效（Fold Effect）" rel="nofollow">折叠特效（Fold Effect）</a></td> 
   <td>折叠特效（Fold Effect）通过折叠元素来隐藏或显示一个元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-hide.html" title=".hide()" rel="nofollow">.hide()</a></td> 
   <td>使用自定义效果来隐藏匹配的元素。</td> 
   <td><a href="https://www.runoob.com/jqueryui/ref-effects-core.html" title="特效核心（Effects Core）" rel="nofollow">特效核心（Effects Core）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-overrides.html" title="方法重载（Method Overrides）" rel="nofollow">方法重载（Method Overrides）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-methods.html" title="方法（Method）" rel="nofollow">方法（Method）</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-highlight-effect.html" title="突出特效（Highlight Effect）" rel="nofollow">突出特效（Highlight Effect）</a></td> 
   <td>突出特效（Highlight Effect）通过首先改变背景颜色来隐藏或显示一个元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-puff-effect.html" title="膨胀特效（Puff Effect）" rel="nofollow">膨胀特效（Puff Effect）</a></td> 
   <td>通过在缩放元素的同时隐藏元素来创建膨胀特效（Puff Effect）。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-pulsate-effect.html" title="跳动特效（Pulsate Effect）" rel="nofollow">跳动特效（Pulsate Effect）</a></td> 
   <td>跳动特效（Pulsate Effect）通过跳动来隐藏或显示一个元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-removeClass.html" title=".removeClass()" rel="nofollow">.removeClass()</a></td> 
   <td>当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class。</td> 
   <td><a href="https://www.runoob.com/jqueryui/ref-effects-core.html" title="特效核心（Effects Core）" rel="nofollow">特效核心（Effects Core）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-overrides.html" title="方法重载（Method Overrides）" rel="nofollow">方法重载（Method Overrides）</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-scale-effect.html" title="缩放特效（Scale Effect）" rel="nofollow">缩放特效（Scale Effect）</a></td> 
   <td>按照某个百分比缩放元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-shake-effect.html" title="震动特效（Shake Effect）" rel="nofollow">震动特效（Shake Effect）</a></td> 
   <td>垂直或水平方向多次震动元素。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-show.html" title=".show()" rel="nofollow">.show()</a></td> 
   <td>使用自定义效果来显示匹配的元素。</td> 
   <td><a href="https://www.runoob.com/jqueryui/ref-effects-core.html" title="特效核心（Effects Core）" rel="nofollow">特效核心（Effects Core）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-overrides.html" title="方法重载（Method Overrides）" rel="nofollow">方法重载（Method Overrides）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-methods.html" title="方法（Method）" rel="nofollow">方法（Method）</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-size-effect.html" title="尺寸特效（Size Effect）" rel="nofollow">尺寸特效（Size Effect）</a></td> 
   <td>调整元素尺寸到指定宽度和高度。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-slide-effect.html" title="滑动特效（Slide Effect）" rel="nofollow">滑动特效（Slide Effect）</a></td> 
   <td>把元素滑动出视区。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-switchClass.html" title=".switchClass()" rel="nofollow">.switchClass()</a></td> 
   <td>当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的 Class。</td> 
   <td><a href="https://www.runoob.com/jqueryui/ref-effects-core.html" title="特效核心（Effects Core）" rel="nofollow">特效核心（Effects Core）</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-toggle.html" title=".toggle()" rel="nofollow">.toggle()</a></td> 
   <td>使用自定义效果来显示或隐藏匹配的元素。</td> 
   <td><a href="https://www.runoob.com/jqueryui/ref-effects-core.html" title="特效核心（Effects Core）" rel="nofollow">特效核心（Effects Core）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-overrides.html" title="方法重载（Method Overrides）" rel="nofollow">方法重载（Method Overrides）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-methods.html" title="方法（Method）" rel="nofollow">方法（Method）</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-toggleClass.html" title=".toggleClass()" rel="nofollow">.toggleClass()</a></td> 
   <td>当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class。</td> 
   <td><a href="https://www.runoob.com/jqueryui/ref-effects-core.html" title="特效核心（Effects Core）" rel="nofollow">特效核心（Effects Core）</a>&nbsp;|&nbsp;<a href="https://www.runoob.com/jqueryui/ref-overrides.html" title="方法重载（Method Overrides）" rel="nofollow">方法重载（Method Overrides）</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/jqueryui/api-transfer-effect.html" title="转移特效（Transfer Effect）" rel="nofollow">转移特效（Transfer Effect）</a></td> 
   <td>把一个元素的轮廓转移到另一个元素。</td> 
  </tr> 
 </tbody> 
</table>

[Easings]: https://www.runoob.com/jqueryui/api-easings.html