首页
/ 正文

jQuery 效果 – 隐藏和显示（建议收藏）

更新时间: 2025-04-07 22:23:12

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

前言

在现代网页开发中，用户与页面的交互体验至关重要。无论是导航栏的折叠展开、弹窗的淡入淡出，还是表单的动态显示与隐藏，这些视觉效果背后的核心技术之一就是 jQuery 效果 – 隐藏和显示。
jQuery 作为简化 DOM 操作的 JavaScript 库，通过封装底层复杂逻辑，让开发者能够轻松实现优雅的动画效果。本文将从基础概念讲起，逐步深入讲解如何通过 jQuery 控制元素的隐藏与显示，并结合实战案例帮助读者掌握实际应用场景。

一、基础概念：什么是“隐藏和显示”？

1.1 元素的显示与隐藏状态

网页中的 DOM 元素默认是可见的，但通过 CSS 的 display 或 visibility 属性可以控制其是否显示。例如：

display: none：元素完全不可见，且不占据页面空间。
visibility: hidden：元素不可见，但保留其占位空间。

jQuery 的隐藏和显示效果，本质上是通过动态修改这些 CSS 属性实现的。

形象比喻：
可以把网页元素比作舞台上的演员。当 display: none 时，演员“退场”并离开舞台；而 visibility: hidden 则是演员“屏住呼吸”，虽然观众看不到，但舞台空间仍被占用。

1.2 jQuery 的简化操作

jQuery 提供了封装好的方法，无需直接操作 CSS 属性即可实现隐藏和显示，例如：

$("#myElement").hide(); // 隐藏元素  
$("#myElement").show(); // 显示元素

二、核心方法详解

2.1 基础方法：`show()` 和 `hide()`

方法定义

hide()：将元素的 display 属性设置为 none，使其完全隐藏。
show()：恢复元素的 display 属性为原始值（如 block 或 inline），使其重新显示。

参数与用法

这两个方法支持参数控制动画效果：

// 立即执行（无动画）  
$("#element").hide();  

// 带动画效果（参数为毫秒数）  
$("#element").show(1000); // 1秒内显示  
$("#element").hide("slow"); // 使用预设速度（"slow", "fast" 或具体数值）

示例代码：

<button id="toggleBtn">切换显示</button>  
<div id="content" style="display: none;">这是一个隐藏的内容框</div>  

<script>  
  $("#toggleBtn").click(function() {  
    $("#content").toggle(); // 等价于 hide/show 的智能切换  
  });  
</script>

2.2 灵活切换：`toggle()` 方法

功能特性

toggle() 是 show() 和 hide() 的结合体，根据元素当前状态自动执行相反操作：

若元素可见 → 执行 hide()
若元素隐藏 → 执行 show()

动态参数支持

同样支持动画参数：

$("#element").toggle(500); // 500毫秒内切换

场景应用：
常用于导航栏的折叠展开、表单的条件显示等场景。例如：

<button id="menuToggle">展开菜单</button>  
<ul id="navMenu" style="display: none;">  
  <li>首页</li>  
  <li>关于</li>  
</ul>  

<script>  
  $("#menuToggle").click(function() {  
    $("#navMenu").toggle("fast");  
    $(this).text( $("#navMenu").is(":visible") ? "折叠菜单" : "展开菜单" );  
  });  
</script>

2.3 动画效果方法：滑动与淡入淡出

jQuery 还提供了更丰富的动画效果方法，让隐藏和显示过程更自然。

2.3.1 滑动动画：`slideDown()`、`slideUp()`、`slideToggle()`

slideDown()：从顶部向下“展开”显示元素。
slideUp()：向上收起元素，使其隐藏。
slideToggle()：根据当前状态智能切换。

比喻说明：
想象一个抽屉（元素），slideDown() 是“拉开抽屉”，slideUp() 是“推回抽屉”，而 slideToggle() 就像自动识别抽屉状态并执行相反动作的机械臂。

示例代码：

$("#slideBtn").click(function() {  
  $("#panel").slideToggle(800); // 800毫秒内滑动切换  
});

2.3.2 淡入淡出动画：`fadeIn()`、`fadeOut()`、`fadeToggle()`

fadeIn()：通过透明度从 0 逐渐变为 1 显示元素。
fadeOut()：透明度从 1 逐渐变为 0 隐藏元素。
fadeToggle()：智能切换透明度状态。

使用场景：
适合需要“渐进式”视觉效果的场景，如弹窗、加载提示等。

示例代码：

$("#fadeBtn").click(function() {  
  $("#dialog").fadeToggle(500, function() {  
    // 动画完成后执行的回调函数  
    console.log("动画完成！");  
  });  
});

三、进阶技巧与常见问题

3.1 动画持续时间与 easing 效果

3.1.1 自定义动画时长

通过参数可精确控制动画速度：

$("#element").slideUp(1500); // 1.5秒滑动隐藏

3.1.2 添加 easing 效果

通过 jQuery UI 插件，可添加缓动函数（如弹性、反弹等）：

$("#element").show("slide", { direction: "up" }, 1000); // 需引入 jQuery UI

3.2 回调函数：动画完成后的操作

所有动画方法支持回调函数，确保在动画结束后执行其他逻辑：

$("#box").fadeOut(800, function() {  
  // 动画结束后，修改元素内容  
  $(this).text("动画已完成！");  
});

3.3 常见问题与解决方案

问题 1：元素初始状态不隐藏？

原因：元素默认 display 属性可能被 CSS 重置。
解决：在 HTML 中显式设置 style="display: none"，或通过 CSS 类控制。

问题 2：多个动画冲突如何处理？

解决：使用 .stop() 方法暂停当前动画：

$("#element").stop().fadeOut(); // 先停止当前动画再执行

四、实战案例：可折叠的导航菜单

4.1 需求分析

实现一个响应式导航栏：

移动端默认隐藏，点击按钮展开；
PC 端始终显示，无需折叠。

4.2 HTML 结构

<!-- 移动端按钮 -->  
<button id="mobileNavBtn">≡</button>  

<!-- 导航菜单 -->  
<nav id="mainNav">  
  <a href="#">首页</a>  
  <a href="#">产品</a>  
  <a href="#">关于我们</a>  
</nav>

4.3 CSS 布局

/* 默认隐藏移动端菜单 */  
#mainNav {  
  display: none;  
  position: fixed;  
  top: 50px;  
  right: 0;  
  background: #f8f8f8;  
  width: 200px;  
}  

/* PC 端媒体查询 */  
@media (min-width: 768px) {  
  #mainNav { display: block; }  
  #mobileNavBtn { display: none; }  
}

4.4 jQuery 逻辑

$(document).ready(function() {  
  $("#mobileNavBtn").click(function() {  
    $("#mainNav").slideToggle("fast");  
  });  

  // 点击空白区域关闭菜单  
  $(document).click(function(e) {  
    if (!$(e.target).closest("#mainNav, #mobileNavBtn").length) {  
      $("#mainNav").slideUp();  
    }  
  });  
});

五、结论

通过本文的学习，读者应已掌握 jQuery 隐藏和显示效果的核心方法与进阶技巧。从基础的 show()/hide() 到滑动、淡入动画，再到实际案例的完整实现，这些技术能显著提升网页的交互体验。

在实际开发中，建议结合 CSS 动画与 jQuery 的灵活性，根据场景选择最佳方案。例如：

需要复杂过渡效果时，优先使用 CSS transition；
需要兼容性或交互逻辑复杂时，jQuery 仍是高效的选择。

掌握 jQuery 效果 – 隐藏和显示，不仅能优化用户界面，更能为后续学习更高级的动画库（如 Anime.js、GreenSock）打下坚实基础。

关键词布局检查：

标题、前言、结论自然提及“jQuery 效果 – 隐藏和显示”；
正文通过“隐藏”“显示”“效果”等关键词强化主题关联性。

jQuery 效果 – 隐藏和显示（建议收藏）

前言

一、基础概念：什么是“隐藏和显示”？

1.1 元素的显示与隐藏状态

1.2 jQuery 的简化操作

二、核心方法详解

2.1 基础方法：`show()` 和 `hide()`

方法定义

参数与用法

2.2 灵活切换：`toggle()` 方法

功能特性

动态参数支持

2.3 动画效果方法：滑动与淡入淡出

2.3.1 滑动动画：`slideDown()`、`slideUp()`、`slideToggle()`

2.3.2 淡入淡出动画：`fadeIn()`、`fadeOut()`、`fadeToggle()`

三、进阶技巧与常见问题

3.1 动画持续时间与 easing 效果

3.1.1 自定义动画时长

3.1.2 添加 easing 效果

3.2 回调函数：动画完成后的操作

3.3 常见问题与解决方案

问题 1：元素初始状态不隐藏？

问题 2：多个动画冲突如何处理？

四、实战案例：可折叠的导航菜单

4.1 需求分析

4.2 HTML 结构

4.3 CSS 布局

4.4 jQuery 逻辑

五、结论

最新发布

HTML DOM Style fontStyle 属性（千字长文）

HTML DOM Style fontVariant 属性（保姆级教程）

HTML DOM Style fontWeight 属性（千字长文）

HTML DOM Style lineHeight 属性（保姆级教程）

HTML DOM Style quotes 属性（超详细）

HTML DOM Style textAlign 属性（长文解析）

HTML DOM Style textDecoration 属性（长文解析）

HTML DOM Style textIndent 属性（长文解析）

HTML DOM Style textShadow 属性（建议收藏）

HTML DOM Style textTransform 属性（长文解析）

jQuery 效果 – 隐藏和显示（建议收藏）

前言

一、基础概念：什么是“隐藏和显示”？

1.1 元素的显示与隐藏状态

1.2 jQuery 的简化操作

二、核心方法详解

2.1 基础方法：show() 和 hide()

方法定义

参数与用法

2.2 灵活切换：toggle() 方法

功能特性

动态参数支持

2.3 动画效果方法：滑动与淡入淡出

2.3.1 滑动动画：slideDown()、slideUp()、slideToggle()

2.3.2 淡入淡出动画：fadeIn()、fadeOut()、fadeToggle()

三、进阶技巧与常见问题

3.1 动画持续时间与 easing 效果

3.1.1 自定义动画时长

3.1.2 添加 easing 效果

3.2 回调函数：动画完成后的操作

3.3 常见问题与解决方案

问题 1：元素初始状态不隐藏？

问题 2：多个动画冲突如何处理？

四、实战案例：可折叠的导航菜单

4.1 需求分析

4.2 HTML 结构

4.3 CSS 布局

4.4 jQuery 逻辑

五、结论

最新发布

HTML DOM Style fontStyle 属性（千字长文）

HTML DOM Style fontVariant 属性（保姆级教程）

HTML DOM Style fontWeight 属性（千字长文）

HTML DOM Style lineHeight 属性（保姆级教程）

HTML DOM Style quotes 属性（超详细）

HTML DOM Style textAlign 属性（长文解析）

HTML DOM Style textDecoration 属性（长文解析）

HTML DOM Style textIndent 属性（长文解析）

HTML DOM Style textShadow 属性（建议收藏）

HTML DOM Style textTransform 属性（长文解析）

2.1 基础方法：`show()` 和 `hide()`

2.2 灵活切换：`toggle()` 方法

2.3.1 滑动动画：`slideDown()`、`slideUp()`、`slideToggle()`

2.3.2 淡入淡出动画：`fadeIn()`、`fadeOut()`、`fadeToggle()`