jQuery 滑动
滑动效果通过改变元素高度来展开或收起内容，是手风琴菜单、下拉面板、隐藏式导航的常见实现方式。jQuery 提供 slideDown()、slideUp() 和 slideToggle() 三个方法。
slideDown() 与 slideUp()
slideDown() 让隐藏的元素从上往下"滑出"（高度 0 → 正常），slideUp() 让元素从下往上"收起"（高度正常 → 0）：
$('#panel').slideDown(); // 向下滑出
$('#panel').slideUp(800); // 0.8 秒内向上收起
$('#panel').slideUp('slow'); // 慢速收起
slideToggle() 切换
在滑出与收起之间自动切换，最常用的滑动面板开关：
$('#panel').slideToggle(); // 展开/收起自动切换
$('#panel').slideToggle(500); // 0.5 秒完成切换
完整示例
下面实现一个经典的手风琴式下拉面板：
<!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>
<style>
#panel { background:#d9ead3; padding:10px; display:none; }
</style>
</head>
<body>
<button id="flip">展开 / 收起面板</button>
<div id="panel">这里是折叠面板里的内容，点按钮试试滑出和收起的效果。</div>
<script>
$(function () {
$('#flip').click(function () {
// 效果：面板以 0.6 秒的动画向下展开或向上收起
$('#panel').slideToggle(600);
});
});
</script>
</body>
</html>
滑动的两个细节
- 元素原本处于
display: none时才能看到"滑出"动画；如果本来就是显示的，slideDown()没有视觉效果。 - 动画期间连续快速点击按钮，会产生排队抖动。可在方法前加
stop()清除排队，下一节会详细讲解。
小结
滑动系列用高度变化实现"抽屉式"展开收起：slideDown() 滑出、slideUp() 收起、slideToggle() 自动切换，配合 stop() 可避免连续点击时的抖动。下一节进入自定义动画 animate()。