jQuery 淡入淡出

淡入淡出通过改变元素透明度实现柔和过渡，常用于图片轮播、提示框、弹层背景等场景。jQuery 提供 fadeIn()、fadeOut()、fadeToggle() 和 fadeTo() 四个方法。

fadeIn() 与 fadeOut()

fadeIn() 让隐藏的元素逐渐显现（透明度 0 → 1），fadeOut() 让元素逐渐消失（透明度 1 → 0）：

$('#box').fadeIn();         // 淡入
$('#box').fadeOut(1000);    // 1 秒内淡出
$('#box').fadeIn('slow');   // 慢速淡入

注意：fadeOut() 结束后元素会被置为 display: none 并隐藏。

fadeToggle() 切换

在淡入与淡出之间自动切换，适合做开关效果：

$('#box').fadeToggle();       // 若隐藏则淡入，若显示则淡出
$('#box').fadeToggle('fast'); // 带速度地切换

fadeTo() 淡到指定透明度

fadeTo() 需要两个参数：速度和目标透明度（0 到 1 之间），它不会把元素设为 display: none：

// 0.5 秒内把透明度降到 0.2（元素仍占据页面空间）
$('#box').fadeTo(500, 0.2);

完整示例

<!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>
</head>
<body>
<button id="in">淡入</button>
<button id="out">淡出</button>
<button id="half">淡到半透明</button>
<p id="box" style="background:#7cc7ff;padding:10px;display:none;">我会慢慢浮现和消失</p>

<script>
$(function () {
    $('#in').click(function () {
        $('#box').fadeIn(1000);           // 效果：段落 1 秒内淡入
    });
    $('#out').click(function () {
        $('#box').fadeOut(1000);          // 效果：段落 1 秒内淡出并隐藏
    });
    $('#half').click(function () {
        $('#box').fadeTo(500, 0.3);       // 效果：0.5 秒内变得几乎透明
    });
});
</script>
</body>
</html>

小结

淡入淡出系列用透明度营造柔和的视觉过渡：fadeIn()/fadeOut() 控制显现与消失，fadeToggle() 负责来回切换，fadeTo() 则可停在任意透明度。下一节学习滑动效果。

笔记加载中…

标签：#jQuery

返回知识库