当前位置：首页 > news >正文

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

news 2026/7/2 7:12:19

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 提供了以下核心方法，这些方法可以与内置或自定义特效结合使用。

.effect( effect, [options], [duration], [complete] )
- 描述：对元素应用指定的动画特效（不改变显示状态）。
- 参数：
  - effect：特效名称（字符串，如 “explode”、“bounce”、“shake”）。
  - options：特效特定选项（对象）。
  - duration：持续时间（毫秒或 “slow”/“fast”）。
  - complete：动画完成回调函数。
- 示例：
```
$("#box").effect("explode",{pieces:16},1000);
```
.show( effect, [options], [duration], [complete] )
- 描述：显示元素，并使用指定特效。
- 示例：$("#box").show("puff", { percent: 160 }, 800);
.hide( effect, [options], [duration], [complete] )
- 描述：隐藏元素，并使用指定特效。
- 示例：$("#box").hide("explode", { pieces: 9 }, 1000);
.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>