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()）
点击按钮应用不同效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Effects 示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//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>
<button data-effect="bounce">Bounce（弹跳）</button>
<button data-effect="explode">Explode（爆炸）</button>
<button data-effect="shake">Shake（摇晃）</button>
<button data-effect="pulsate">Pulsate（脉动）</button>
<div id="box"></div>
<script>
$(function() {
$("button").click(function() {
var effect = $(this).data("effect");
$("#box").show().effect(effect, { times: 3 }, 1000); // times 只对某些效果有效
});
});
</script>
</body>
</html>2. show/hide/toggle 带效果
替换默认的快速显示/隐藏。
<button id="show">Show (blind)</button>
<button id="hide">Hide (clip)</button>
<button id="toggle">Toggle (puff)</button>
<div id="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>
<div id="text">点击我切换样式</div>
<script>
$("#text").click(function() {
$(this).toggleClass("big", 1000); // 1秒内切换类
// 或使用 switchClass
// $(this).switchClass("small", "big", 1000);
});
</script>4. 颜色动画（animate + color 插件）
jQuery UI 自带颜色动画支持。
<button id="colorAnim">颜色动画</button>
<div id="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 扩展示例，请告诉我！
