基础效果：显隐与滑动

5.1 基础效果：显隐与滑动

第 4 章收尾时页面已经"能听会动"，但动作是瞬间的——一点就消失，一按就出现，眼睛跟不上。本章从制式动作开始补上形体语言：显隐、淡入淡出、滑动收展三族效果，都是拿来就用的成品。别小看这些"简单"方法，它们身上的时长签名、回调时机和一个隐蔽的 display 记忆规则，恰恰是后面两节动画编排的地基。

本节摘要：基础效果三族——显隐族直接改 display，淡入淡出族同时过渡透明度，滑动族过渡高度；通用签名是时长、缓动、完成回调；hide 之后 show 恢复的是jQuery 记住的初始 display 值，内联写了 flex 这类非常规值的元素要小心失忆。

制式动作盘点：三族效果

三族方法共用一套签名：方法([时长][, 缓动][, 完成回调])。时长可以直接给毫秒数，也可以用关键字 slow（六百毫秒）与 fast（二百毫秒），不传则瞬时完成：

// 显隐族：只改 display，干脆利落
$('#notice').hide();
$('#notice').show();
$('#notice').toggle();            // 按当前状态切换

// 淡入淡出族：透明度过渡，收尾仍改 display
$('#notice').fadeIn('slow');
$('#notice').fadeOut('fast', function () {
  console.log('淡出完成，此刻 display 已是 none');
});
$('#notice').fadeToggle();
$('#notice').fadeTo(400, 0.5);    // 过渡到指定透明度，不隐藏

// 滑动族：高度过渡，卷帘效果
$('#notice').slideDown();
$('#notice').slideUp();
$('#notice').slideToggle();
​

族的选用看场合：开关式面板用显隐族最直接；提示消息的退场用淡出更柔和；手风琴、抽屉菜单用滑动族，高度的渐变自带"收起来"的物理感。族内方法两两成对，toggle 系列负责"状态不确定时的一键切换"——但要警惕 toggle 语义依赖当前状态，快速连点或状态被别处改过时容易与预期相反，关键流程宁可显式判断。

display 记忆：show 恢复到哪一步

hide 的内部动作是把 display 改成 none，同时记住原来的值；show 恢复的是记住的那个值。听起来周到，坑就埋在"记住"的来源上：

<div id="panel" style="display: flex;">...</div>
​

$('#panel').hide();    // display: none，同时记住 flex
$('#panel').show();    // 恢复 flex，没问题

// 但如果初始值来自样式表而非内联，旧版本的记忆可能退化为默认值
// 另一个常见坑：初始就是 display:none 的元素，show 恢复成 block 而不是你想要的 flex
$('#drawer').show().css('display', 'flex');   // 手动纠正的兜底写法
​

排查口诀：show 之后布局不对，先查该元素想要的 display 值是不是非常规（flex、grid、inline-block），再用一行 css 纠正。这类问题在老版本里更常见，新版本对样式表初始值的记忆已改善，但"show 完顺手核对 display"仍是值得保留的习惯。

完整案例：提示条的全套进出场

背景：表单提交后要在页顶展示一条提示，自动淡入、停留、淡出，且连续提交时不能叠出多条提示。操作、结果、解读、变式一次走完：

function showToast(msg) {
  var $tip = $('#notice');
  $tip.text(msg).stop(true, true);   // 先清掉上一轮没演完的动画
  $tip.fadeIn('fast', function () {
    $tip.delay(1600).fadeOut('slow');
  });
}

$('#register').on('submit', function (event) {
  event.preventDefault();
  showToast('登记成功，已进入队列');
});
​

结果：单次提交时提示条淡入、停留、淡出；连续快速提交时提示条不闪烁、不叠影。解读：两个细节支撑起体验——text 先写消息再动画，避免旧内容闪现；stop(true, true) 把上一轮"进出场半程"的动作清场并直接跳到终态，新动画从干净状态起步。这里出现的 stop、delay 是下一节与队列正面交手的主角，先用后讲。变式：想让提示条从顶部滑下来而不是淡入，把 fadeIn、fadeOut 换成 slideDown、slideUp 即可——签名完全一致，制式动作可以整套替换。

原生对照：类名加过渡的现代写法

制式动作在现代原生方案里通常交给 CSS 过渡：

.tip { opacity: 1; transition: opacity .4s; }
.tip.off { opacity: 0; pointer-events: none; }
​

document.getElementById('notice').classList.add('off');    // 淡出
document.getElementById('notice').classList.remove('off'); // 淡入
​

与 jQuery 效果方法的取舍点有两个。其一，CSS 过渡由浏览器合成线程执行，性能与流畅度通常更好，且样式细节集中在样式表里。其二，完成时机原生要靠监听 transitionend，"排队"语义得自己实现——这正是下一节 jQuery 队列的价值所在：它把"先淡出再滑动再回调"的编排收进了同一个先进先出通道。效果越简单越偏向 CSS，编排越复杂越见 jQuery 队列的方便，这条分界线请在 5.3 节末尾自己再校准一次。

要点复盘

• 三族制式动作：显隐改 display、淡入淡出加透明度、滑动改高度；签名统一为时长、缓动、回调。
• slow 与 fast 是六百与二百毫秒的关键字，不传时长即瞬时完成且不走动画队列。
• hide 与 show 依赖 display 记忆，非常规 display 值（flex、grid）恢复时务必核对。
• 提示条案例的三件套——先写文本、stop 清场、delay 停留——是可复用的出场模板。
• 简单显隐在现代方案里优先类名加 CSS 过渡；需要编排排队时 jQuery 队列更省心。

制式动作会用了，下一节自己造动作：animate 的参数解剖与缓动节奏的调校。