当前位置：首页 > news >正文

HoRain云--jQuery淡入淡出特效全解析

news 2026/5/12 21:00:08

🎬 HoRain 云小助手：个人主页

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

jQuery 淡入淡出效果

jQuery 提供了四种用于实现淡入淡出效果的方法，这些方法使元素的透明度平滑过渡，为网页增添动态效果。以下是详细的说明：

jQuery 淡入淡出方法概述

jQuery 拥有以下四种淡入淡出方法：

fadeIn()- 使已隐藏的元素淡入
fadeOut()- 使可见元素淡出
fadeToggle()- 在 fadeIn() 和 fadeOut() 之间切换
fadeTo()- 将元素的透明度渐变为指定值

方法详解

1. fadeIn() 方法

作用：使已隐藏的元素从完全不可见逐渐变为可见

语法：

$(selector).fadeIn(speed, callback);

参数说明：

speed：动画执行时间，可选值有 "slow"（默认600毫秒）、"fast"（默认200毫秒）或具体毫秒值
callback：动画完成后执行的函数

示例：

// 默认速度（600ms） $("#box").fadeIn(); // 慢速（1000ms） $("#box").fadeIn("slow"); // 自定义速度（3000ms） $("#box").fadeIn(3000);

2. fadeOut() 方法

作用：使可见元素从完全可见逐渐变为不可见

语法：

$(selector).fadeOut(speed, callback);

参数说明：

speed：动画执行时间，可选值有 "slow"、"fast" 或毫秒值
callback：动画完成后执行的函数

示例：

// 默认速度（600ms） $("#box").fadeOut(); // 慢速（1000ms） $("#box").fadeOut("slow"); // 自定义速度（3000ms） $("#box").fadeOut(3000);

3. fadeToggle() 方法

作用：在 fadeIn() 和 fadeOut() 之间切换

语法：

$(selector).fadeToggle(speed, callback);

参数说明：

speed：动画执行时间，可选值有 "slow"、"fast" 或毫秒值
callback：动画完成后执行的函数

示例：

// 默认速度 $("#box").fadeToggle(); // 慢速 $("#box").fadeToggle("slow"); // 自定义速度 $("#box").fadeToggle(3000);

4. fadeTo() 方法

作用：将元素的透明度渐变为指定值（0-1之间）

语法：

$(selector).fadeTo(speed, opacity, callback);

参数说明：

speed：动画执行时间，可选值有 "slow"、"fast" 或毫秒值
opacity：目标不透明度（0-1之间，0为完全透明，1为完全不透明）
callback：动画完成后执行的函数

示例：

// 慢速渐变到0.15不透明度 $("#box").fadeTo("slow", 0.15); // 慢速渐变到0.4不透明度 $("#box").fadeTo("slow", 0.4); // 慢速渐变到0.7不透明度 $("#box").fadeTo("slow", 0.7);

实际应用示例

基本使用示例

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery 淡入淡出效果示例</title> <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script> <style> .box { width: 200px; height: 200px; background-color: #f00; margin: 20px; display: none; } </style> </head> <body> <div class="box" id="box"></div> <button id="fadeIn">淡入</button> <button id="fadeOut">淡出</button> <button id="fadeToggle">切换</button> <script> $(document).ready(function() { $("#fadeIn").click(function() { $("#box").fadeIn("slow"); }); $("#fadeOut").click(function() { $("#box").fadeOut("slow"); }); $("#fadeToggle").click(function() { $("#box").fadeToggle("slow"); }); }); </script> </body> </html>

结合其他效果的高级用法

// 淡出后改变位置，再淡入 $("#targetElement").fadeOut(500, function() { $(this).css("left", "100px"); }).delay(500).fadeIn(500); // 鼠标悬停时淡入，离开时淡出 $("#targetElement").hover( function() { $(this).stop().fadeIn(500); }, // 鼠标悬停时淡入 function() { $(this).stop().fadeOut(500); } // 鼠标离开时淡出 );