jQuery UI API 类别 – 特效（Effects）
jQuery UI Effects 是 jQuery UI 的重要组成部分，它在 jQuery 核心特效（如 .animate()、.show()、.hide()）基础上进行了扩展，主要增加了：
- 颜色动画支持（使用 Color Animation 插件）。
- 类切换动画（
.addClass()、.removeClass()等带动画）。 - 更多内置特效（如 explode、puff、bounce 等）。
- 额外缓动函数（Easings）。
这些特效主要通过 .effect() 方法应用，也可以通过扩展的 .show()、.hide()、.toggle() 来实现显示/隐藏时的动画效果。
官方文档：https://api.jqueryui.com/category/effects/
1. 核心方法（Effects Core）
这些是特效的基础方法，通常用于直接应用动画。
.effect(effectName, [options], [duration], [complete])
对元素应用指定特效（不影响显示/隐藏）。
示例：$("#elem").effect("explode", { pieces: 16 }, 1000);.show(effectName, [options], [duration], [complete])
显示元素，并使用指定特效。.hide(effectName, [options], [duration], [complete])
隐藏元素，并使用指定特效。.toggle(effectName, [options], [duration], [complete])
切换显示/隐藏，并使用指定特效。- 类动画方法（支持动画过渡类变化）：
.addClass(className, [duration], [easing], [complete]).removeClass(className, [duration], [easing], [complete]).toggleClass(className, [state], [duration], [easing], [complete]).switchClass(removeClassName, addClassName, [duration], [easing], [complete])
2. 内置特效类型（Built-in Effects）
jQuery UI 提供了以下预定义特效名称（字符串形式传入 .effect() 等方法）：
| 特效名称 | 描述 | 示例视觉效果
|
|————–|——————————————-|—————————————————–|
| blind | 像百叶窗一样拉开/收起（垂直或水平）。 | |
| bounce | 弹跳效果（结合 hide/show 时会淡入/淡出）。| |
| clip | 垂直或水平剪切隐藏/显示。 | |
| drop | 淡入/淡出并滑动（方向可指定）。 | |
| explode | 分裂成碎片爆炸隐藏/显示。 | |
| fade | 简单淡入/淡出（等同 jQuery 的 fade）。 | |
| fold | 折叠效果（先水平再垂直）。 | |
| highlight| 先高亮背景色，再恢复。 | |
| puff | 放大并淡出隐藏 / 缩小并淡入显示。 | |
| pulsate | 脉冲式闪烁淡入/淡出。 | |
| scale | 缩放尺寸隐藏/显示。 | |
| shake | 水平或垂直抖动。 | |
| size | 调整宽高到指定尺寸。 | |
| slide | 滑动出/入视口（方向可指定）。 | |
| transfer| 将元素轮廓转移到另一个元素。 | |
3. 其他相关功能
- 颜色动画：使用
.animate()支持颜色属性（如 backgroundColor、color）。 - Easings：额外缓动函数（如 easeInQuad、easeOutBounce 等），可在特效中通过
easing选项指定。 - 自定义特效：使用
$.effects.define("myEffect", function(options, done) { ... })创建新特效。
示例代码
$(function() {
// 爆炸隐藏
$("#btnExplode").click(function() {
$("#box").hide("explode", { pieces: 25 }, 1000);
});
// 弹跳显示
$("#btnBounce").click(function() {
$("#box").show("bounce", { times: 5 }, 800);
});
// 缩放切换
$("#btnScale").click(function() {
$("#box").toggle("scale", { percent: 150 }, 600);
});
});注意：jQuery UI 已进入维护模式（最新 1.14.1），特效功能稳定但不再新增。新项目建议使用 CSS 动画或现代库（如 GSAP）。
如果您想了解某个具体特效（如 explode）的详细选项、参数或完整代码示例，请告诉我！
