jQuery UI 实例 - 特效（Effect）
jQuery UI Effect（特效）实例
jQuery UI 的Effects核心提供丰富的动画效果，可用于.show()、.hide()、.toggle()，或独立.effect()调用。常见效果包括：blind、bounce、clip、drop、explode、fade、fold、highlight、puff、pulsate、scale、shake、size、slide、transfer 等。
此外，还有类动画：.addClass()、.removeClass()、.toggleClass()、.switchClass()支持带效果过渡。
官方演示地址：https://jqueryui.com/effect/（可查看所有效果）
下面提供几个经典实例，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基本效果演示（.effect()）
点击按钮应用不同效果。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Effects 示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script><style>#box{width:100px;height:100px;background:#4CAF50;margin:20px;display:none;}</style></head><body><buttondata-effect="bounce">Bounce（弹跳）</button><buttondata-effect="explode">Explode（爆炸）</button><buttondata-effect="shake">Shake（摇晃）</button><buttondata-effect="pulsate">Pulsate（脉动）</button><divid="box"></div><script>$(function(){$("button").click(function(){vareffect=$(this).data("effect");$("#box").show().effect(effect,{times:3},1000);// times 只对某些效果有效});});</script></body></html>2.show/hide/toggle 带效果
替换默认的快速显示/隐藏。
<buttonid="show">Show (blind)</button><buttonid="hide">Hide (clip)</button><buttonid="toggle">Toggle (puff)</button><divid="panel"style="width:200px;height:150px;background:#2196F3;padding:20px;color:white;">这是一个面板内容</div><script>$("#show").click(function(){$("#panel").show("blind",{direction:"vertical"},1000);});$("#hide").click(function(){$("#panel").hide("clip",1000);});$("#toggle").click(function(){$("#panel").toggle("puff",{percent:200},1000);});</script>3.类切换带动画（addClass/removeClass 等）
平滑过渡 CSS 类变化（如颜色、大小）。
<style>.big{font-size:2em;color:red;background:yellow;padding:20px;}</style><divid="text">点击我切换样式</div><script>$("#text").click(function(){$(this).toggleClass("big",1000);// 1秒内切换类// 或使用 switchClass// $(this).switchClass("small", "big", 1000);});</script>4.颜色动画（animate + color 插件）
jQuery UI 自带颜色动画支持。
<buttonid="colorAnim">颜色动画</button><divid="colorBox"style="width:100px;height:100px;background:green;"></div><script>$("#colorAnim").click(function(){$("#colorBox").animate({backgroundColor:"#ff0000",width:"200px",height:"200px"},1500);});</script>常见效果列表（可在.effect()或 show/hide 中使用）：
- blind（百叶窗）
- bounce（弹跳）
- clip（剪切）
- drop（掉落）
- explode（爆炸）
- fade（淡入淡出）
- fold（折叠）
- highlight（高亮闪烁）
- puff（膨胀消失）
- pulsate（脉动）
- scale（缩放）
- shake（摇晃）
- slide（滑动）
- transfer（转移轮廓）
小技巧：
- 队列管理：使用
.delay()、.stop()控制多个效果顺序。 - easing：添加第二个参数如
"easeInExpo"（需引入 easing 插件）。 - 自定义：结合
.animate()实现更复杂动画。
Effects 可大大提升交互体验，常用于按钮反馈、面板切换、提示高亮。如果你需要特定效果完整演示、结合 Dialog/Accordion 的动画，或Easing 扩展示例，请告诉我！