jQuery UI Hide（隐藏）特效实例
jQuery UI 的hide()方法用于以动画效果隐藏元素（最终设置display: none）。它与show()和toggle()对应，支持相同特效类型（如 blind、clip、drop、explode 等）、持续时间、选项和回调函数。
常用于面板收起、提示消失、交互反馈等场景。
官方文档：https://jqueryui.com/hide/
下面提供几个经典实例，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础隐藏特效（blind、clip、slide）
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Hide 示例</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>#panel{width:300px;height:200px;background:#2196F3;color:white;padding:20px;}</style></head><body><buttonid="blind">Blind 隐藏</button><buttonid="clip">Clip 隐藏</button><buttonid="slide">Slide 隐藏</button><buttonid="show">先显示</button><divid="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）
<buttonid="explode">Explode 隐藏（爆炸）</button><buttonid="puff">Puff 隐藏（缩小消失）</button><buttonid="fold">Fold 隐藏（折叠）</button><buttonid="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）
隐藏完成后执行回调（如提示消息）。
<buttonid="shake">Shake 隐藏（摇晃）</button><buttonid="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 的关闭动画，或特定效果的完整演示，请告诉我！
)
