hide() 是 jQuery 效果库中使用频率很高的一个方法。它的核心职责单一且明确——将选中的元素隐藏起来。但隐藏的方式、速度以及隐藏后要做的事情，这些细节才是决定用户体验的关键。
很多开发者刚接触时，只是简单调用 $("selector").hide()，这确实能让元素消失，但这种瞬间的隐藏方式会让页面显得生硬。jQuery 设计者早就考虑到了这点，所以 hide() 方法提供了三种不同复杂度的调用形式。
语法拆解
hide() 方法有三种重载形式，依次递进，功能也越来越精细：
1. 基础形式
$(selector).hide();
没有任何参数。元素会立刻从页面上消失，不占用任何过渡时间。它本质上等价于直接设置 CSS 属性 display: none。
2. 带时长和回调的形式
$(selector).hide(speed, callback);
-
speed：控制隐藏动画持续的时间。可以填入预定义的字符串
"slow"（约600毫秒）或"fast"（约200毫秒），也可以直接给一个毫秒数值，比如800。 -
callback：一个函数，在隐藏动画彻底执行完毕后被调用。这个回调在你想在元素不见之后执行某些逻辑时非常有用。
3. 带缓动函数的完整形式
$(selector).hide(speed, easing, callback);
-
easing：缓动函数，决定了动画在其持续时间内的变化速率。jQuery 默认只内置了
"swing"（两头慢中间快）和"linear"（匀速）两种。要使用更丰富的缓动效果，需要额外引入 jQuery UI 等扩展库。
一个更贴近项目开发的例子
官方文档中常用一首诗作为示例，为了更贴合真实场景，我们换成一个用户反馈表单的提交场景。当用户点击“提交”后，我们用带时长和回调的 hide() 来优雅地隐藏表单，并显示一条感谢信息。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitBtn").click(function(){
// 表单以 slow 的速度隐藏
$("#feedbackForm").hide("slow", function(){
// 这个回调函数会在表单隐藏后执行
$("#thankYouMsg").fadeIn(600);
});
});
});
</script>
<style>
#feedbackForm {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#thankYouMsg {
display: none;
color: green;
}
</style>
</head>
<body>
<div id="feedbackForm">
<h3>意见反馈</h3>
<textarea rows="4" placeholder="请留下您的建议..."></textarea><br><br>
<button id="submitBtn">提交反馈</button>
</div>
<div id="thankYouMsg">
<p>感谢您的反馈，我们会认真处理。</p>
</div>
</body>
</html>
在这个例子中，表单的消失不是瞬间完成的，而是有一个 "slow" 的过渡。这让用户能够感知到“我正在提交并且表单正在消失”。我们利用了 hide() 的回调函数，只在表单彻底隐藏之后，才去淡入感谢信息。这种链式逻辑避免了感谢信息突然出现在一个半透明的表单上方这种视觉混乱。
hide() 方法的底层原理与常见误区
调用 hide() 时，jQuery 会在内部记住元素隐藏前的 display 属性值（例如 block、inline-block 等）。当你后续调用 show() 时，它会恢复到原始值，而不是粗暴地统一设为 block。这是一个非常贴心的设计，对于内联元素尤其重要。
本节课程知识要点：如果要隐藏的元素上绑定了其他 JavaScript 正在运行的动画，直接调用无参的 hide() 可能会产生冲突。举个例子，如果你先用 slideUp() 把元素收起一半，然后立刻调用 hide()，元素会瞬间消失。我的处理方式是，在这种场景下先调用 stop() 清理动画队列，再执行 hide()，这样能让状态切换更可控。
个人见解：在学习 hide() 时，很多人会疑惑它和 CSS 的 display: none 直接用有什么区别。表面上看结果一样，但 hide() 的真正价值在于它参与了 jQuery 的动画队列系统。这就意味着你可以把它和 delay()、fadeIn() 等方法串成一段流畅的序列，而直接操作 CSS 则不具备这种编排能力。如果你只求一瞬隐藏，用 jQuery 的 hide() 和原生 CSS 都可以；但如果你的交互是一个多步骤的故事，那么用 hide() 融入动画队列是更合适的选择。
关于 easing 的一点补充：默认的 "swing" 缓动在大多数隐藏场景下表现已经足够自然。我很少去改变 hide() 的缓动方式，除非是为了配合某个独特的视觉风格。与其纠结缓动类型，不如把精力放在选择正确的隐藏时长上——太快用户看不清，太慢又会让页面响应显得迟钝。我个人的习惯是，关键操作使用 400-600 毫秒的隐藏时长，次要元素用 200-300 毫秒。
