news 2026/3/31 3:01:18

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/3/30 8:42:07

C++测试新选择:Catch2终极快速上手指南

C测试新选择&#xff1a;Catch2终极快速上手指南 【免费下载链接】Catch2 项目地址: https://gitcode.com/gh_mirrors/cat/Catch2 在C开发的世界里&#xff0c;测试框架的选择往往决定了开发效率和代码质量。Catch2测试框架以其简洁的语法和强大的功能&#xff0c;正在…

作者头像 李华
网站建设 2026/3/30 6:38:22

社交消息自动回复实战指南(Open-AutoGLM配置精华版)

第一章&#xff1a;社交消息自动回复系统概述在现代即时通讯应用广泛普及的背景下&#xff0c;社交消息自动回复系统成为提升沟通效率、实现智能交互的关键技术。这类系统能够监听用户接收到的消息&#xff0c;并根据预设规则或人工智能模型自动生成响应内容&#xff0c;广泛应…

作者头像 李华
网站建设 2026/3/21 22:23:29

3分钟掌握Material Design引导页:material-intro终极指南

3分钟掌握Material Design引导页&#xff1a;material-intro终极指南 【免费下载链接】material-intro A simple material design app intro with cool animations and a fluent API. 项目地址: https://gitcode.com/gh_mirrors/ma/material-intro 在移动应用开发中&…

作者头像 李华
网站建设 2026/3/24 15:08:48

5分钟掌握OpenCommit:AI生成完美提交信息的终极指南

5分钟掌握OpenCommit&#xff1a;AI生成完美提交信息的终极指南 【免费下载链接】opencommit Auto-generate impressive commits with AI in 1 second &#x1f92f;&#x1f52b; 项目地址: https://gitcode.com/gh_mirrors/op/opencommit 还在为每次提交代码时不知道怎…

作者头像 李华
网站建设 2026/3/14 10:45:15

9 个降AI率工具,MBA 必备高效降重指南

9 个降AI率工具&#xff0c;MBA 必备高效降重指南 AI降重工具&#xff1a;MBA论文的高效护航者 在当今学术环境中&#xff0c;AI生成内容&#xff08;AIGC&#xff09;的普及让论文查重和降AIGC率成为MBA学生不可忽视的挑战。随着各大高校对AI痕迹检测的重视&#xff0c;如何…

作者头像 李华
网站建设 2026/3/27 14:37:49

pgAdmin4终极指南:从零开始掌握PostgreSQL可视化管理

pgAdmin4终极指南&#xff1a;从零开始掌握PostgreSQL可视化管理 【免费下载链接】pgadmin4 pgadmin-org/pgadmin4: 是 PostgreSQL 的一个现代&#xff0c;基于 Web 的管理工具。它具有一个直观的用户界面&#xff0c;可以用于管理所有 PostgreSQL 数据库的对象&#xff0c;并支…

作者头像 李华