jQuery UI API 类别 – 特效核心（Effects Core）

jQuery UI API 类别 – 特效核心（Effects Core）

Effects Core 是 jQuery UI 特效系统的核心部分，由 effect.js 文件提供。它扩展了 jQuery 内置的特效功能，主要包括：

• 支持颜色动画（通过 jQuery Color 插件）。
• 类切换动画（addClass、removeClass 等带过渡动画）。
• 额外缓动函数（easings，如 easeInExpo、easeOutBounce 等）。
• 核心方法用于应用自定义特效，而不限于显示/隐藏。

官方文档：https://api.jqueryui.com/category/effects-core/（适用于最新版本 1.14.1）

主要方法

Effects Core 提供了以下核心方法，这些方法可以与内置或自定义特效结合使用。

1. .effect( effect, [options], [duration], [complete] )

• 描述：对元素应用指定的动画特效（不改变显示状态）。
• 参数：
  • effect：特效名称（字符串，如 “explode”、”bounce”、”shake”）。
  • options：特效特定选项（对象）。
  • duration：持续时间（毫秒或 “slow”/”fast”）。
  • complete：动画完成回调函数。
• 示例：
  javascript $("#box").effect("explode", { pieces: 16 }, 1000);

1. .show( effect, [options], [duration], [complete] )

• 描述：显示元素，并使用指定特效。
• 示例：$("#box").show("puff", { percent: 160 }, 800);

1. .hide( effect, [options], [duration], [complete] )

• 描述：隐藏元素，并使用指定特效。
• 示例：$("#box").hide("explode", { pieces: 9 }, 1000);

1. .toggle( effect, [options], [duration], [complete] )

• 描述：切换元素的显示/隐藏状态，并使用指定特效。
• 示例：$("#box").toggle("scale", { percent: 0 }, 600);

类动画方法（Class Transitions）

这些方法支持动画化添加/移除/切换类（会过渡样式变化，如颜色、尺寸）：

• .addClass( className, [duration], [easing], [complete] )
• .removeClass( className, [duration], [easing], [complete] )
• .toggleClass( className, [state], [duration], [easing], [complete] )
• .switchClass( removeClassName, addClassName, [duration], [easing], [complete] )

示例：

$("#box").addClass("highlight", 1000, "easeOutBounce");

示例视觉效果

以下是一些常见特效的演示截图或 GIF（基于 explode、puff、bounce、shake、scale 等）：

完整示例代码

<div id="box" style="width:200px;height:200px;background:red;margin:50px;">点击我应用特效</div>

<script>
$(function() {
    $("#box").click(function() {
        $(this).effect("bounce", { times: 5 }, 800)
               .effect("shake", { times: 3 }, 500);
    });
});
</script>

注意：Effects Core 是所有 jQuery UI 特效的基础。项目已进入维护模式，新项目推荐使用 CSS 动画或 GSAP 等现代库。

如果您想了解特定方法（如 .effect() 的所有选项）或某个特效的详细参数，请提供更多细节！