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：动画完成回调函数。
   • 示例：

     $("#box").effect("explode",{pieces:16},1000);

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

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

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

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

4. .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 等）：

完整示例代码

<divid="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() 的所有选项）或某个特效的详细参数，请提供更多细节！