jQuery UI Show（显示）特效实例
jQuery UI 的 show() 方法用于以动画效果显示隐藏的元素（需先 display: none）。它可以指定特效类型（如 blind、fade、slide 等）、持续时间、easing 缓动函数和回调。
与 .hide() 和 .toggle() 类似，show() 是 Effects 核心的一部分，常用于面板展开、图片加载、提示显示等场景。
官方文档：https://jqueryui.com/show/
下面提供几个经典实例，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础显示特效（blind、fade、slide）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Show 示例</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: #4CAF50; color: white; padding: 20px; display: none; }
</style>
</head>
<body>
<button id="blind">Blind 显示</button>
<button id="fade">Fade 显示</button>
<button id="slide">Slide 显示</button>
<div id="panel">这是一个以动画效果显示的内容面板！</div>
<script>
$(function() {
$("#blind").click(function() {
$("#panel").show("blind", { direction: "vertical" }, 1000); // 垂直百叶窗
});
$("#fade").click(function() {
$("#panel").show("fade", 1500); // 淡入
});
$("#slide").click(function() {
$("#panel").show("slide", { direction: "right" }, 1000); // 从左向右滑动
});
});
</script>
</body>
</html>2. 高级特效（puff、bounce、explode）
<button id="puff">Puff 显示（膨胀）</button>
<button id="bounce">Bounce 显示（弹跳）</button>
<button id="explode">Explode 显示（爆炸）</button>
<script>
$("#puff").click(function() {
$("#panel").show("puff", { percent: 200 }, 1000); // 膨胀到200%
});
$("#bounce").click(function() {
$("#panel").show("bounce", { times: 5 }, 1500); // 弹跳5次
});
$("#explode").click(function() {
$("#panel").show("explode", { pieces: 16 }, 2000); // 分成16块爆炸显示
});
</script>3. 回调函数 + 组合使用
显示完成后执行回调（如加载内容）。
<button id="showWithCallback">显示并加载内容</button>
<script>
$("#showWithCallback").click(function() {
$("#panel").show("fold", 1000, function() { // 折叠展开后回调
$(this).append("<p>内容加载完成！</p>");
alert("显示动画结束");
});
});
</script>支持的特效类型（show/hide/toggle 通用）：
- blind（百叶窗）
- bounce（弹跳）
- clip（剪切）
- drop（掉落）
- explode（爆炸）
- fade（淡入淡出）
- fold（折叠）
- highlight（高亮）
- puff（膨胀）
- pulsate（脉动）
- scale（缩放）
- shake（摇晃）
- slide（滑动）
小技巧：
- 无特效快速显示：
$("#panel").show();（jQuery 原生） - 自定义 easing：需引入 jQuery UI easing 插件，如
"easeOutBounce" - 与 hide/toggle 组合实现切换动画：
$("#panel").toggle("slide", 1000);
Show 特效能让页面交互更生动。如果你需要 hide() 或 toggle() 的对应实例、图片渐显加载，或 结合 Dialog 的打开动画，请告诉我！
