jQuery 淡入/淡出

jQuery 特效 - 淡入淡出

使用 jQuery 的淡入淡出方法，轻松为 HTML 元素创建淡入和淡出效果。

尝试下方按钮查看 fadeIn()、fadeOut()、fadeToggle() 和 fadeTo() 的实际效果。

jQuery 简化了常见淡入淡出动画的实现。虽然现代 CSS 通过 opacity 属性上的过渡（transitions）提供了性能更优的替代方案，但 jQuery 的方法提供了一种快速且兼容性好的方式来实现这些效果。

jQuery 淡入淡出方法

jQuery 提供了几种方法来对元素的 opacity（不透明度）进行动画处理：

• fadeIn(): 逐渐增加隐藏元素的 opacity（不透明度）从 0 到 1，使其可见。
• fadeOut(): 逐渐降低可见元素的 opacity（不透明度）从 1 到 0，使其隐藏（并在最后设置 display: none）。
• fadeToggle(): 在 fadeIn() 和 fadeOut() 之间切换。
• fadeTo(): 将元素的 opacity（不透明度）动画化到指定值（0 到 1 之间），而不改变其 display 属性。

jQuery fadeIn() 方法

使用 fadeIn() 方法平滑地显示隐藏元素。

语法：

$(selector).fadeIn(duration, complete);

duration 和 complete 参数的功能类似于 hide() 和 show()（毫秒数、‘slow’、‘fast’、可选的回调函数）。

示例：

// 假设 #div1、#div2、#div3 最初是隐藏的（例如，style="display: none;"）
$('#fadeInButton').on('click', () => {
  // 立即淡入（默认持续时间）
  $('#div1').fadeIn();
  // 缓慢淡入
  $('#div2').fadeIn('slow');
  // 在 3 秒内淡入
  $('#div3').fadeIn(3000);
});

jQuery fadeOut() 方法

使用 fadeOut() 方法平滑地隐藏可见元素。

语法：

$(selector).fadeOut(duration, complete);

参数与 fadeIn() 相同。

示例：

$('#fadeOutButton').on('click', () => {
  // 立即淡出
  $('#div1').fadeOut();
  // 缓慢淡出
  $('#div2').fadeOut('slow');
  // 在 3 秒内淡出，然后显示提示框
  $('#div3').fadeOut(3000, () => {
    alert('Div 3 faded out!');
  });
});

jQuery fadeToggle() 方法

fadeToggle() 根据元素的当前可见性，方便地在 fadeIn() 和 fadeOut() 之间切换。

语法：

$(selector).fadeToggle(duration, complete);

参数相同。

示例：

$('#fadeToggleButton').on('click', () => {
  // 立即切换淡入淡出
  $('#div1').fadeToggle();
  // 缓慢切换淡入淡出
  $('#div2').fadeToggle('slow');
  // 在 3 秒内切换淡入淡出
  $('#div3').fadeToggle(3000);
});

jQuery fadeTo() 方法

fadeTo() 允许您将元素的 opacity（不透明度）动画化到特定级别，而不会将其隐藏（即，它不改变 display 属性）。

语法：

$(selector).fadeTo(duration, opacity, complete);

必需参数：

• duration（持续时间）：动画速度（毫秒数、‘slow’、‘fast’）。
• opacity（不透明度）：要淡入的目标值，是一个介于 0（完全透明）和 1（完全不透明）之间的数字。

可选的 complete 回调函数参数也可用。

示例：

$('#fadeToButton').on('click', () => {
  // 缓慢淡出到 15% 不透明度
  $('#div1').fadeTo('slow', 0.15);
  // 缓慢淡出到 40% 不透明度
  $('#div2').fadeTo('slow', 0.4);
  // 缓慢淡出到 70% 不透明度
  $('#div3').fadeTo('slow', 0.7);
});

现代替代方案与注意事项

淡入淡出效果非常适合使用 CSS 过渡（transitions）。使用 CSS transition 规则改变 opacity 属性通常更流畅、性能更好。

CSS 示例：

/* CSS */
.fadeable {
  opacity: 1;
  transition: opacity 0.5s ease-in-out; /* 500 毫秒过渡 */
}

.fadeable.faded-out {
  opacity: 0;
}

// JavaScript（使用 jQuery 切换类）
$('#cssFadeButton').on('click', () => {
  $('.fadeable').toggleClass('faded-out');
});

当您需要其语法的简洁性、需要兼容旧版浏览器或已大量使用 jQuery 进行动画时，请选择 jQuery 的淡入淡出方法。

jQuery 特效参考

查阅官方 jQuery 文档，获取所有特效方法及其选项的详细信息。