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）
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Show 示例</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:#4CAF50;color:white;padding:20px;display:none;}</style></head><body><buttonid="blind">Blind 显示</button><buttonid="fade">Fade 显示</button><buttonid="slide">Slide 显示</button><divid="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）
<buttonid="puff">Puff 显示（膨胀）</button><buttonid="bounce">Bounce 显示（弹跳）</button><buttonid="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.回调函数 + 组合使用
显示完成后执行回调（如加载内容）。
<buttonid="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 的打开动画，请告诉我！
)
