jQuery 隐藏/显示
隐藏与显示是页面里最常用的效果，例如折叠面板、弹窗开关、详情展开。jQuery 提供了 hide()、show() 和 toggle() 三个方法，让元素在显示与隐藏之间平滑切换。
hide() 与 show()
hide() 隐藏选中的元素，show() 显示它，语法都是 $(选择器).hide(速度, 回调函数)：
$('#box').hide(); // 立即隐藏
$('#box').show(); // 立即显示
$('#box').hide(1000); // 1 秒内慢慢隐藏
$('#box').show('slow'); // 以"慢速"显示
速度参数可以传毫秒数（如 500），也可以传关键字 'slow'、'fast'。
toggle() 一键切换
如果元素是隐藏的就显示、是显示的就隐藏，用 toggle() 最省事——适合做开关按钮：
$('#box').toggle(); // 在隐藏/显示之间切换
$('#box').toggle('fast'); // 带动画地切换
完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 引入 jQuery（https://example.com 为占位地址，实际使用时请替换为真实 CDN 或本地文件） -->
<script src="https://example.com/jquery.min.js"></script>
</head>
<body>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
<p id="box" style="background:#ffe08a;padding:10px;">你好，我是会被隐藏的段落</p>
<script>
$(function () {
$('#hide').click(function () {
$('#box').hide(800); // 效果：段落 0.8 秒内收起
});
$('#show').click(function () {
$('#box').show(800); // 效果：段落 0.8 秒内展开
});
$('#toggle').click(function () {
$('#box').toggle(400); // 效果：来回切换，动画 0.4 秒
});
});
</script>
</body>
</html>
工作原理
hide() 之所以能看到"慢慢收起"的动画，是因为 jQuery 同时修改了元素的高度、宽度与透明度，直到 display: none。隐藏后元素不占页面空间，与 visibility: hidden（仍占空间但不可见）不同，使用时注意区分。
小结
hide() / show() 控制显隐，toggle() 做一键切换，三者都能带速度参数产生平滑动画。这是 jQuery 效果家族的第一组，下一节看淡入淡出效果。