jQuery show()方法详解：从基础显示到动画过渡-代码号

在网页交互中，元素的显示与隐藏是常见的需求。jQuery 的 show() 方法提供了一种直接的方式来让被隐藏的元素重新可见。这篇文章会结合语法、参数和实际案例，来讲清楚它的用法，顺带分享一些我这些年写前端时的实际体会。

语法结构

show() 方法有三种重载形式，灵活应对不同场景：

$(selector).show();
$(selector).show(speed, callback);
$(selector).show(speed, easing, callback);

这三种形式的核心区别在于是否带动画过渡以及过渡的精细控制程度。

参数拆解

参数	是否必填	说明
speed	可选	控制元素从隐藏到显示所花费的时间。可取字符串 `"slow"`（约600ms）、`"fast"`（约200ms），或直接传入毫秒数如 `1500`。
easing	可选	指定动画的缓动函数，决定过渡过程中的速度变化曲线。默认是 `"swing"`（先慢后快再慢），另一个内置值是 `"linear"`（匀速）。
callback	可选	在 `show()` 动画彻底执行完毕后触发的回调函数。适合用来做连锁操作，比如显示后再修改内容。

这里有个我踩过的坑：早期我习惯把 speed 设为 0，以为这和直接无参调用 show() 一样。其实不一样——带 speed 哪怕为 0，jQuery 仍然会把它当成动画来调度，而无参的 show() 是瞬间修改 display 属性，性能开销更小。所以如果你的场景不需要动画过渡，就直接用 $(selector).show()，别画蛇添足。

基础示例：纯显示与隐藏

先看一个不带任何动画参数的基础用法。页面里有一首诗和两个按钮，分别控制段落的隐藏与显示。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>
<p>
<b>代码号学习编程小诗：</b><br/>
Twinkle, twinkle, little star<br/>
How I wonder what you are<br/>
Up above the world so high<br/>
Like a diamond in the sky<br/>
Twinkle, twinkle little star<br/>
How I wonder what you are
</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

效果很直观：点击“隐藏”按钮，整段 p 元素瞬间消失；点击“显示”按钮，元素立刻恢复。这里的 show() 没带任何参数，就是把 display: none 强制还原成元素原本的显示方式（block、inline 等）。jQuery 内部会记住元素隐藏前的 display 属性值，这点做得比较贴心。

进阶示例：带速度参数的动画显示

如果说上面的无参调用是开关灯，那带 speed 参数的调用就是调光器。下面这个例子让隐藏和显示都带有逐渐过渡的效果。

$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide(1000);
    });
    $("#show").click(function(){
        $("p").show(1500);
    });
});

在这里：

点击“隐藏”，段落会在 1000 毫秒 内逐渐淡出并收缩
点击“显示”，段落会在 1500 毫秒 内慢慢展开到完整尺寸

show(1500) 的执行过程其实同时操作了元素的宽、高和透明度。jQuery 会从 display: none 状态开始，先把元素设为 display: block 但宽高为 0、opacity 为 0，然后在 1.5 秒内渐变到元素的自然尺寸和不透明。

我个人的建议：不要滥用大数值的 speed。超过 2000 毫秒的显示动画很容易让用户觉得页面反应迟钝。1500ms 算是一个视觉舒适的上限，既有过渡感又不会拖沓。

缓动函数（easing）的实际感受

默认 easing 参数值是 "swing"，你要是不传，jQuery 就按这个来处理。它的速度曲线是开头和结尾慢、中间快，符合人眼的自然感知。

如果想换一种感觉，可以指定 "linear"：

$("p").show(1000, "linear", function(){
    alert("段落已显示");
});

这段代码让显示过程变成匀速推进，动画完成后弹出一个提示框。"linear" 在某些场景下会显得更利落，比如菜单展开、工具栏滑出这类偏功能性的 UI 动效，用匀速反而比 "swing" 更有“确定感”。

本节课程知识要点

show() 无参调用会直接修改 display 属性，不产生动画队列，适合纯逻辑切换。
带 speed 参数的调用会生成一个动画任务，同时改变元素的宽度、高度和透明度。
speed 值可以用预设字符串 "slow"、"fast"，或手动写毫秒数。
easing 参数控制动画的速度曲线，内置 "swing" 和 "linear" 两种，如需更多缓动效果可引入 jQuery UI 库。
callback 回调函数在动画彻底结束后执行，适合做下一个步骤的衔接，比如元素显示后立即聚焦到其中的输入框。
如果你的页面需要频繁切换元素的可见性，考虑用 toggle() 方法来替代分别写 hide() 和 show() 的冗余逻辑。

jQuery 的 show() 方法看起来简单，但参数组合带来的表现差异在项目里影响不小。把这些细节理顺，写出来的交互效果会更顺手、也更符合用户的直觉预期。

本文标签：

jQuery show()方法详解：从基础显示到动画过渡