jQuery UI API 类别 – 方法重载（Method Overrides）

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() 的所有参数）或完整示例代码，请提供更多细节！