jQuery 效果 - 滑动

jQuery 效果：滑动 (Slide Effects)

滑动效果通过动态改变元素的高度（height）来实现展开和收起的动画，常用于手风琴菜单、折叠面板、下拉列表等场景。与淡入淡出不同，滑动效果会改变元素的布局，隐藏时元素不再占据空间。

一、核心方法详解

1..slideDown()- 向下滑动显示

元素从高度0逐渐展开到原始高度，实现“展开”效果。

语法：

$(selector).slideDown(duration,easing,callback);

参数：

• duration(可选): 动画持续时间。
  • 数字：毫秒数（如1000）。
  • 字符串："slow"(600ms),"normal"(400ms),"fast"(200ms)。
• easing(可选): 缓动函数（需 jQuery UI）。
• callback(可选): 动画完成后的回调函数。

示例：

// 立即展开（默认 400ms）$("#content").slideDown();// 1 秒后展开$("#content").slideDown(1000);// 使用预设速度$("#content").slideDown("slow");// 带回调$("#content").slideDown(1000,function(){console.log("展开完成！");});

注意：元素初始状态必须是display: none，否则不会执行动画。

2..slideUp()- 向上滑动隐藏

元素从原始高度逐渐收缩到高度0，最后将display设置为none，实现“收起”效果。

语法：

$(selector).slideUp(duration,easing,callback);

示例：

// 收起元素$("#content").slideUp();// 2 秒后收起$("#content").slideUp(2000);// 带回调$("#content").slideUp(1500,function(){console.log("收起完成，元素已隐藏");});

注意：收起后，元素不再占据页面空间，后续元素会上移。

3..slideToggle()- 滑动切换

根据元素当前状态自动切换：

• 如果元素可见 → 执行slideUp（收起）。
• 如果元素隐藏 → 执行slideDown（展开）。

语法：

$(selector).slideToggle(duration,easing,callback);

示例：

// 点击按钮切换展开/收起$("#toggleBtn").click(function(){$("#content").slideToggle(600);});// 带回调$("#toggleBtn").click(function(){$("#content").slideToggle(800,function(){console.log("切换完成");});});

二、实战应用场景

1. 手风琴菜单 (Accordion)

手风琴效果：点击一个标题，展开对应内容，同时自动收起其他内容。

<divclass="accordion"><h3>标题 1</h3><divclass="content">内容 1...</div><h3>标题 2</h3><divclass="content">内容 2...</div><h3>标题 3</h3><divclass="content">内容 3...</div></div><script>$(function(){// 初始化：隐藏所有内容$(".content").hide();// 点击标题$(".accordion h3").click(function(){// 关闭其他所有内容$(".content").slideUp(300);// 切换当前内容$(this).next(".content").slideToggle(300);});});</script>

优化版（防止重复点击）：

$(".accordion h3").click(function(){const$currentContent=$(this).next(".content");// 如果当前内容已展开，则关闭它if($currentContent.is(":visible")){$currentContent.slideUp(300);return;}// 关闭其他所有内容$(".content").slideUp(300);// 展开当前内容$currentContent.slideDown(300);});

2. 折叠面板 (Collapsible Panel)

单个面板的展开/收起，常用于 FAQ 或设置项。

<divclass="panel"><divclass="panel-header"><h4>常见问题</h4><spanclass="toggle-icon">▼</span></div><divclass="panel-body"style="display:none;"><p>这里是详细内容...</p></div></div><script>$(".panel-header").click(function(){const$body=$(this).next(".panel-body");const$icon=$(this).find(".toggle-icon");// 切换面板$body.slideToggle(400);// 切换图标方向if($body.is(":visible")){$icon.text("▲");}else{$icon.text("▼");}});</script>

3. 下拉列表 (Dropdown)

点击按钮展开下拉菜单，点击外部收起。

<divclass="dropdown"><buttonid="dropdownBtn">菜单 ▼</button><ulid="dropdownMenu"style="display:none;position:absolute;"><li>选项 1</li><li>选项 2</li><li>选项 3</li></ul></div><script>// 点击按钮切换$("#dropdownBtn").click(function(e){e.stopPropagation();// 阻止冒泡$("#dropdownMenu").slideToggle(200);});// 点击外部收起$(document).click(function(){$("#dropdownMenu").slideUp(200);});// 再次阻止按钮点击冒泡到文档$("#dropdownMenu").click(function(e){e.stopPropagation();});</script>

4. 表单验证错误提示

滑动显示/隐藏错误提示，比淡入淡出更直观。

<inputtype="text"id="email"placeholder="邮箱"><divid="error-msg"style="display:none;color:red;">请输入有效的邮箱地址</div><buttonid="submit">提交</button><script>$("#submit").click(function(){constemail=$("#email").val();if(!email.includes("@")){// 滑动显示错误$("#error-msg").stop(true,true).slideDown(300);$("#email").focus();}else{// 滑动隐藏错误$("#error-msg").slideUp(300);alert("提交成功");}});// 输入时隐藏错误$("#email").on("input",function(){if($(this).val().includes("@")){$("#error-msg").slideUp(200);}});</script>

三、高级技巧与注意事项

1. 防止动画队列堆积

快速多次点击会导致动画排队，产生延迟。使用.stop()解决。

// ❌ 可能导致动画堆积$("#btn").click(function(){$("#content").slideToggle(500);});// ✅ 使用 stop() 清除队列$("#btn").click(function(){$("#content").stop(true,true).slideToggle(500);});

• stop(true, true): 清空队列 + 立即跳转到最终状态。

2. 链式调用

滑动方法支持链式调用，可组合其他效果。

$("#box").slideUp(500).delay(1000)// 等待 1 秒.slideDown(500).css("border","1px solid blue");// 动画完成后执行

3. 与 CSS 配合

jQuery 动画会覆盖内联样式。如果希望使用 CSS 过渡，可以切换类名。

// CSS.slide-up{max-height:0;overflow:hidden;transition:max-height0.5s ease;}.slide-down{max-height:500px;// 足够大overflow:hidden;transition:max-height0.5s ease;}// jQuery$("#box").addClass("slide-up").delay(500).removeClass("slide-up").addClass("slide-down");

4. 判断元素状态

// 检查是否可见if($("#box").is(":visible")){console.log("可见");}// 检查是否隐藏if($("#box").is(":hidden")){console.log("隐藏");}

5. 性能优化

• 避免对大量元素同时执行滑动动画，可能导致页面卡顿。
• 对于简单展开/收起，考虑使用 CSSmax-height过渡（性能更好）。

四、滑动 vs 淡入淡出

五、速查表

jQuery 的滑动效果通过改变高度实现自然的展开/收起动画，特别适合需要改变布局的场景。在实际开发中，注意使用.stop()防止动画堆积，并根据场景选择合适的方法。