news 2026/9/11 17:00:45

jQuery UI API 类别 - 特效(Effects)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery UI API 类别 - 特效(Effects)

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);});});

注意:jQuery UI 已进入维护模式(最新 1.14.1),特效功能稳定但不再新增。新项目建议使用 CSS 动画或现代库(如 GSAP)。

如果您想了解某个具体特效(如 explode)的详细选项、参数或完整代码示例,请告诉我!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/9 21:18:27

当数据开口说话:虎贲等考AI如何解码数字世界的“沉默语言”

在深夜的实验室里,李博士凝视着屏幕上的数据海洋——三年的实验积累了超过200GB的复杂基因组数据,传统的统计工具已无法处理这些信息间的非线性关联。这是无数研究者的共同困境:我们生活在一个数据富饶的时代,却被困在信息匮乏的孤…

作者头像 李华
网站建设 2026/9/11 9:01:10

5分钟速成UI设计:用draw-a-ui从草图到代码的极简指南

5分钟速成UI设计:用draw-a-ui从草图到代码的极简指南 【免费下载链接】draw-a-ui Draw a mockup and generate html for it 项目地址: https://gitcode.com/gh_mirrors/dr/draw-a-ui 还在为前端开发中繁琐的UI设计而头疼?想要快速将创意转化为实际…

作者头像 李华
网站建设 2026/9/11 13:53:27

Cycle.js终极指南:快速掌握响应式函数式编程框架

Cycle.js终极指南:快速掌握响应式函数式编程框架 【免费下载链接】cyclejs A functional and reactive JavaScript framework for predictable code 项目地址: https://gitcode.com/gh_mirrors/cy/cyclejs 想要构建可预测、易维护的Web应用?Cycle…

作者头像 李华
网站建设 2026/9/10 11:56:17

Windows注册表终极指南:用Rust安全管理系统配置

Windows注册表终极指南:用Rust安全管理系统配置 【免费下载链接】windows-rs Rust for Windows 项目地址: https://gitcode.com/GitHub_Trending/wi/windows-rs 想要轻松管理Windows系统配置?windows-rs项目为你提供了最安全的注册表操作解决方案…

作者头像 李华
网站建设 2026/9/11 16:41:13

3个理由告诉你为什么ES Module Shims是现代前端开发的必备工具

3个理由告诉你为什么ES Module Shims是现代前端开发的必备工具 【免费下载链接】es-module-shims Shims for new ES modules features on top of the basic modules support in browsers 项目地址: https://gitcode.com/gh_mirrors/es/es-module-shims 在现代前端开发中…

作者头像 李华
网站建设 2026/9/10 18:16:19

Kotaemon支持知识新鲜度加权,优先返回最新内容

Kotaemon支持知识新鲜度加权,优先返回最新内容在企业级智能问答系统中,一个常被忽视却影响深远的问题正在浮现:用户得到的答案虽然语义相关,但内容早已过时。想象一下,员工查询最新的差旅报销标准,系统却引…

作者头像 李华