XXL-JOB时间轮机制解析与优化实践
2026/7/23 7:15:51
jQuery UI API 类别 - 方法重载（Method Overrides）
Method Overrides是 jQuery UI 的一个特殊类别，它重载（override）了 jQuery 核心库中的几个常用方法，为它们添加了额外的动画支持（如自定义特效、颜色过渡、缓动函数等）。这些重载主要集中在显示/隐藏元素和类操作上，让原本简单的切换操作也能使用 jQuery UI 的丰富特效。
官方文档：https://api.jqueryui.com/category/overrides/（适用于最新版本 1.14.1）
重要注意：
- 这些方法会覆盖 jQuery 核心的同名方法（如
.show()、.addClass()）。 - 如果页面未加载 jQuery UI，这些方法仍存在（不会报错），但不会具备增强功能，可能导致预期外的行为。
- 这些重载依赖 Effects Core，因此通常与特效系统结合使用。
重载的方法列表
| 方法 | 描述 | 主要增强功能 | 示例代码 |
|---|---|---|---|
| .show() | 显示匹配元素，使用自定义特效。 | 支持 jQuery UI 特效（如 “explode”、“puff”）。 | $("#box").show("blind", 1000); |
| .hide() | 隐藏匹配元素，使用自定义特效。 | 支持 jQuery UI 特效。 | $("#box").hide("explode", { pieces: 16 }, 1000); |
| .toggle() | 切换显示/隐藏，使用自定义特效。 | 支持 jQuery UI 特效。 | $("#box").toggle("fold", 800); |
| .addClass() | 添加类，同时动画化样式变化。 | 支持持续时间、缓动、回调。 | $("#box").addClass("highlight", 1000, "easeOutBounce"); |
| .removeClass() | 移除类，同时动画化样式变化。 | 支持持续时间、缓动、回调。 | $("#box").removeClass("highlight", 1000); |
| .toggleClass() | 切换类，同时动画化样式变化。 | 支持状态参数、持续时间等。 | $("#box").toggleClass("active", true, 600); |
| .switchClass() | 从一个类切换到另一个类，同时动画化变化。 | 支持持续时间、缓动。 | $("#box").switchClass("old", "new", 1000); |
通用参数说明
这些重载方法通常支持以下参数（类似于 Effects Core）：
- effect：特效名称（字符串，如 “blind”、“scale”、“puff” 等）。
- options：特效特定选项（对象，如
{ percent: 150 }）。 - duration：动画时长（毫秒数、“slow”、“fast”）。
- easing：缓动函数（jQuery UI 提供额外 easings）。
- complete：动画完成回调函数。
示例：类动画与特效结合
$(function(){// 添加类并动画化（背景颜色过渡）$("#box").addClass("red-bg",1500,"easeInOutExpo");// 使用特效隐藏$("#hideBtn").click(function(){$("#box").hide("puff",{percent:200},1000);});// 切换显示并使用折叠特效$("#toggleBtn").click(function(){$("#box").toggle("fold",800);});});与 jQuery 核心的区别
- jQuery 核心的
.show()/hide()/toggle()只支持基本动画（如 fade、slide）。 - jQuery 核心的类方法（如
.addClass()）是瞬时的，无动画。 - jQuery UI 的重载让这些方法支持所有内置特效、颜色动画和更丰富的缓动。
注意：此类别已进入维护模式（最新 1.14.1），新项目推荐使用 CSS 过渡/动画或现代库（如 Animate.css、GSAP）。
如果您想了解某个具体重载方法（如 .addClass() 的所有参数）或完整示例代码，请提供更多细节！