jQuery 显示/隐藏

jQuery 特效 - 隐藏和显示

学习如何使用 jQuery 直观的特效方法动态地隐藏、显示和切换 HTML 元素的可见性。

点击下方按钮查看 hide()、show() 和 toggle() 的实际效果。

本教程提供简洁的示例，帮助您快速掌握 jQuery 特效。虽然现代 CSS 提供了像过渡（transitions）和动画（animations）这样的替代方案，但 jQuery 特效因其简洁性和跨浏览器兼容性（尤其是在已使用 jQuery 的项目中）仍然非常有用。

核心方法：hide()、show()、toggle()

jQuery 提供了直接的方法来控制元素的可见性：

• hide(): 使选定的元素不可见（设置 CSS 属性 display: none）。
• show(): 使选定的元素可见（恢复原始的 display 属性值，例如 block、inline）。
• toggle(): 在隐藏和显示元素之间切换。

基本用法示例：

// 等待 DOM 加载完毕
$(() => {
  // 点击 #hideButton 时隐藏段落
  $('#hideButton').on('click', () => {
    $('p.content').hide();
  });

  // 点击 #showButton 时显示段落
  $('#showButton').on('click', () => {
    $('p.content').show();
  });

  // 点击 #toggleButton 时切换段落可见性
  $('#toggleButton').on('click', () => {
    $('p.content').toggle();
  });
});

语法：

$(selector).hide(duration, complete); $(selector).show(duration, complete); $(selector).toggle(duration, complete);

可选参数：

• duration（持续时间）：指定动画的速度。可以是毫秒数（例如 1000），或字符串 'slow' (600ms) 或 'fast' (200ms)。如果省略，则立即改变状态。
• complete（完成回调）：动画完成后执行的回调函数（callback function）。现代实践中常用动画方法返回的 Promise，但仍然支持回调函数。

带持续时间的示例：

// 在 1 秒（1000 毫秒）内隐藏段落
$('#slowHideButton').on('click', () => {
  $('p.content').hide(1000);
});

// 快速（'fast'）显示段落
$('#fastShowButton').on('click', () => {
  $('p.content').show('fast');
});

带回调函数的示例：

// 隐藏段落，然后显示一个提示框
$('#hideWithAlertButton').on('click', () => {
  $('p.content').hide('slow', () => {
    alert('Hide animation complete!');
  });
});

现代替代方案与注意事项

虽然 jQuery 的 hide() 和 show() 很方便，但简单的可见性切换通常可以通过 CSS 实现。

CSS 示例：

/* CSS */
.hidden {
  display: none;
}

// JavaScript（可以使用 jQuery 或原生 JS）
$('#toggleClassButton').on('click', () => {
  $('.content').toggleClass('hidden');
});

对于动画效果，CSS 过渡（transitions）和关键帧动画（keyframe animations）通常性能更好，因为它们可以由浏览器进行硬件加速。然而，jQuery 动画为基本情况提供了更简洁的语法，并自动处理跨浏览器细节。

jQuery 特效参考

要全面了解所有 jQuery 特效，包括滑动（sliding）和自定义动画（custom animations），请查阅官方 jQuery 文档或可靠的参考资料。