news 2026/4/23 15:03:12

jQuery UI API 类别 - 特效核心(Effects Core)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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() 的所有选项)或某个特效的详细参数,请提供更多细节!

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

代码背后的良知:软件测试从业者的社会责任

在数字化浪潮席卷全球的今天&#xff0c;软件已深度融入社会生活的各个层面。从金融交易到医疗健康&#xff0c;从交通出行到社会治理&#xff0c;软件系统的可靠性与安全性直接关系到公众利益与社会稳定。作为软件质量的守护者&#xff0c;测试工程师承担的已不仅是技术验证职…

作者头像 李华
网站建设 2026/4/18 10:25:30

揭秘Whisper语音识别:从原始音频到智能文本的完整技术链路

揭秘Whisper语音识别&#xff1a;从原始音频到智能文本的完整技术链路 【免费下载链接】whisper openai/whisper: 是一个用于实现语音识别和语音合成的 JavaScript 库。适合在需要进行语音识别和语音合成的网页中使用。特点是提供了一种简单、易用的 API&#xff0c;支持多种语…

作者头像 李华
网站建设 2026/4/17 21:25:00

从问卷炼狱到数据绿洲:虎贲等考如何重构科研的“第一问”

凌晨两点&#xff0c;社会学博士生陈默盯着屏幕上那份问卷&#xff0c;第13次修改。问题的顺序似乎总不合理&#xff0c;选项的设置可能隐含引导&#xff0c;而那个最核心的研究假设&#xff0c;竟然找不到一个合适的量表来衡量。他知道&#xff0c;这份问卷一旦发出&#xff0…

作者头像 李华
网站建设 2026/4/23 14:46:04

5分钟用XML构建API原型:快马平台实践

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 请生成一个RESTful API的XML响应示例&#xff0c;用于返回博客文章列表。响应应包含3篇示例文章&#xff0c;每篇文章有ID、标题、作者、发布时间、摘要和标签列表。要求符合常见的…

作者头像 李华
网站建设 2026/4/23 14:31:29

基于计算机视觉的药物识别与剂量计算系统设计与实现中期检查

附表B.2&#xff1a;六盘水师范学院毕业论文&#xff08;设计&#xff09;中期检查表学院计算机科学学院专业计算机科学与技术姓名XXX学号202100000学生班级1班/专升本班论文&#xff08;设计&#xff09;题目指导教师姓名XXX/XXX&#xff08;企业&#xff09;指导教师职称XXX/…

作者头像 李华
网站建设 2026/4/23 14:16:57

基于可视化分析与机器学习探究导致肥胖的因素开题报告(1)

河北环境工程学院 本科毕业论文&#xff08;设计&#xff09;开题报告 基于可视化分析与机器学习探究导致肥胖的因素 学生姓名 &#xff08;四号宋体居中&#xff09; 班 级 &#xff08;四号宋体居中&#xff0c;非中文Times New Roman&#xff09; 学 号 &#x…

作者头像 李华