jQuery UI Toggle（切换）特效实例
Toggle 是 jQuery UI Effects 核心方法之一，用于在显示和隐藏之间切换元素，同时应用动画特效（如果元素已显示则隐藏，已隐藏则显示）。它与 show() 和 hide() 使用相同的特效类型，非常适合实现展开/收起面板、切换按钮、动画菜单等交互。
官方文档：https://jqueryui.com/toggle/
下面提供几个渐进实例，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础切换特效（blind、clip、slide）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Toggle 示例</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>
#panel { width: 300px; height: 200px; background: #FF9800; color: white; padding: 20px; }
</style>
</head>
<body>
<button id="blind">Blind 切换</button>
<button id="clip">Clip 切换</button>
<button id="slide">Slide 切换</button>
<div id="panel">这是一个支持动画切换的内容面板！点击按钮切换显示/隐藏。</div>
<script>
$(function() {
$("#blind").click(function() {
$("#panel").toggle("blind", { direction: "vertical" }, 1000);
});
$("#clip").click(function() {
$("#panel").toggle("clip", 1000);
});
$("#slide").click(function() {
$("#panel").toggle("slide", { direction: "right" }, 1000);
});
});
</script>
</body>
</html>2. 高级特效（explode、puff、fold、scale）
<button id="explode">Explode 切换（爆炸）</button>
<button id="puff">Puff 切换（膨胀）</button>
<button id="fold">Fold 切换（折叠）</button>
<button id="scale">Scale 切换（缩放）</button>
<script>
$("#explode").click(function() {
$("#panel").toggle("explode", { pieces: 16 }, 1500);
});
$("#puff").click(function() {
$("#panel").toggle("puff", { percent: 150 }, 1000);
});
$("#fold").click(function() {
$("#panel").toggle("fold", 1000);
});
$("#scale").click(function() {
$("#panel").toggle("scale", { percent: 0 }, 1000);
});
</script>3. 回调函数 + 单按钮切换
单按钮控制切换，并在动画结束时执行回调。
<button id="singleToggle">点击切换（带回调）</button>
<script>
$("#singleToggle").click(function() {
$("#panel").toggle("bounce", { times: 3 }, 1000, function() {
alert("切换动画完成！当前状态：" + ($(this).is(":visible") ? "显示" : "隐藏"));
});
});
</script>支持的特效类型（与 show/hide 通用）：
- blind（百叶窗）
- clip（剪切）
- drop（掉落）
- explode（爆炸）
- fold（折叠）
- puff（膨胀切换）
- scale（缩放）
- shake（摇晃）
- slide（滑动）
- pulsate（脉动）等
小技巧：
- 无特效快速切换：
$("#panel").toggle();（jQuery 原生，仅显示/隐藏） - 方向控制：如
{ direction: "up" }或{ horizFirst: true } - 与 Accordion/Tabs 结合：实现更复杂的展开收起动画
Toggle 特效能让显示/隐藏交互更富有动态感，常用于 FAQ、侧边栏、提示框。如果你需要 特定特效的更多选项、结合按钮状态文本变化，或 与其他组件联动的示例，请提供更多细节！
