jQuery UI Hide（隐藏）特效实例
jQuery UI 的 hide() 方法用于以动画效果隐藏元素（最终设置 display: none）。它与 show() 和 toggle() 对应，支持相同特效类型（如 blind、clip、drop、explode 等）、持续时间、选项和回调函数。
常用于面板收起、提示消失、交互反馈等场景。
官方文档：https://jqueryui.com/hide/
下面提供几个经典实例，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础隐藏特效（blind、clip、slide）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Hide 示例</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: #2196F3; color: white; padding: 20px; }
</style>
</head>
<body>
<button id="blind">Blind 隐藏</button>
<button id="clip">Clip 隐藏</button>
<button id="slide">Slide 隐藏</button>
<button id="show">先显示</button>
<div id="panel">这是一个以动画效果隐藏的内容面板！</div>
<script>
$(function() {
$("#show").click(function() { $("#panel").show(); }); // 先显示以便测试隐藏
$("#blind").click(function() {
$("#panel").hide("blind", { direction: "vertical" }, 1000); // 垂直百叶窗隐藏
});
$("#clip").click(function() {
$("#panel").hide("clip", 1000); // 剪切隐藏
});
$("#slide").click(function() {
$("#panel").hide("slide", { direction: "down" }, 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").hide("explode", { pieces: 16 }, 1500); // 分成16块爆炸隐藏
});
$("#puff").click(function() {
$("#panel").hide("puff", { percent: 150 }, 1000); // 膨胀后消失
});
$("#fold").click(function() {
$("#panel").hide("fold", { horizFirst: true }, 1000); // 先水平再垂直折叠
});
$("#scale").click(function() {
$("#panel").hide("scale", { percent: 0 }, 1000); // 缩放到0%
});
</script>3. 回调函数 + 其他特效（shake、drop）
隐藏完成后执行回调（如提示消息）。
<button id="shake">Shake 隐藏（摇晃）</button>
<button id="drop">Drop 隐藏（掉落）</button>
<script>
$("#shake").click(function() {
$("#panel").hide("shake", { times: 5 }, 1000, function() {
alert("摇晃隐藏完成！");
});
});
$("#drop").click(function() {
$("#panel").hide("drop", { direction: "down" }, 1000, function() {
$(this).html("<p>已隐藏！</p>").show(); // 隐藏后重置内容
});
});
</script>支持的特效类型（与 show/toggle 通用）：
- blind（百叶窗）
- clip（剪切）
- drop（掉落）
- explode（爆炸）
- fold（折叠）
- puff（膨胀消失）
- scale（缩放）
- shake（摇晃）
- slide（滑动）
- pulsate（脉动）等
小技巧：
- 无特效快速隐藏：
$("#panel").hide();（jQuery 原生） - 与 show/toggle 组合：
$("#panel").toggle("explode", 1000);实现切换动画 - 方向选项：如
{ direction: "up" }或{ horizFirst: true }
Hide 特效能让隐藏过程更自然生动。如果你需要 toggle() 切换特效、结合 Dialog 的关闭动画，或 特定效果的完整演示，请告诉我！
