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

jQuery UI API 类别 - 特效（Effects）

news 2026/6/3 3:00:54

jQuery UI API 类别 - 特效（Effects）

jQuery UI Effects是 jQuery UI 的重要组成部分，它在 jQuery 核心特效（如.animate()、.show()、.hide()）基础上进行了扩展，主要增加了：

颜色动画支持（使用 Color Animation 插件）。
类切换动画（.addClass()、.removeClass()等带动画）。
更多内置特效（如 explode、puff、bounce 等）。
额外缓动函数（Easings）。

这些特效主要通过.effect()方法应用，也可以通过扩展的.show()、.hide()、.toggle()来实现显示/隐藏时的动画效果。

官方文档：https://api.jqueryui.com/category/effects/

1. 核心方法（Effects Core）

这些是特效的基础方法，通常用于直接应用动画。

.effect(effectName, [options], [duration], [complete])
对元素应用指定特效（不影响显示/隐藏）。
示例：$("#elem").effect("explode", { pieces: 16 }, 1000);
.show(effectName, [options], [duration], [complete])
显示元素，并使用指定特效。
.hide(effectName, [options], [duration], [complete])
隐藏元素，并使用指定特效。
.toggle(effectName, [options], [duration], [complete])
切换显示/隐藏，并使用指定特效。
类动画方法（支持动画过渡类变化）：
- .addClass(className, [duration], [easing], [complete])
- .removeClass(className, [duration], [easing], [complete])
- .toggleClass(className, [state], [duration], [easing], [complete])
- .switchClass(removeClassName, addClassName, [duration], [easing], [complete])

2. 内置特效类型（Built-in Effects）

jQuery UI 提供了以下预定义特效名称（字符串形式传入.effect()等方法）：

| 特效名称 | 描述 | 示例视觉效果

|
|--------------|-------------------------------------------|-----------------------------------------------------|
|blind| 像百叶窗一样拉开/收起（垂直或水平）。 | |
|bounce| 弹跳效果（结合 hide/show 时会淡入/淡出）。| |
|clip| 垂直或水平剪切隐藏/显示。 | |
|drop| 淡入/淡出并滑动（方向可指定）。 | |
|explode| 分裂成碎片爆炸隐藏/显示。 | |
|fade| 简单淡入/淡出（等同 jQuery 的 fade）。 | |
|fold| 折叠效果（先水平再垂直）。 | |
|highlight| 先高亮背景色，再恢复。 | |
|puff| 放大并淡出隐藏 / 缩小并淡入显示。 | |
|pulsate| 脉冲式闪烁淡入/淡出。 | |
|scale| 缩放尺寸隐藏/显示。 | |
|shake| 水平或垂直抖动。 | |
|size| 调整宽高到指定尺寸。 | |
|slide| 滑动出/入视口（方向可指定）。 | |
|transfer| 将元素轮廓转移到另一个元素。 | |

3. 其他相关功能

颜色动画：使用.animate()支持颜色属性（如 backgroundColor、color）。
Easings：额外缓动函数（如 easeInQuad、easeOutBounce 等），可在特效中通过easing选项指定。
自定义特效：使用$.effects.define("myEffect", function(options, done) { ... })创建新特效。

示例代码

$(function(){// 爆炸隐藏$("#btnExplode").click(function(){$("#box").hide("explode",{pieces:25},1000);});// 弹跳显示$("#btnBounce").click(function(){$("#box").show("bounce",{times:5},800);});// 缩放切换$("#btnScale").click(function(){$("#box").toggle("scale",{percent:150},600);});});