jQuery fadeOut()方法
栏目：
jquery
发布时间：2024-12-24
jQuery 的 fadeOut() 方法是一个用于创建淡出效果的动画函数。它逐渐改变被选元素的透明度，直到元素完全隐藏（即 opacity 属性变为 0）。这个方法通常用于那些已经可见的元素，但也可以用于初始状态下 opacity 小于 1 的元素。如果元素已经是隐藏的（opacity 为 0 或 display 属性为 none），则 fadeOut() 方法不会有任何效果。
基本用法
fadeOut() 方法的基本语法如下：
$(selector).fadeOut(speed, callback);
selector：这是一个 jQuery 选择器，用于选择你想要应用淡出效果的元素。speed（可选）：动画的速度。可以是字符串"slow"（600 毫秒）、"fast"（200 毫秒）或数字（表示毫秒数）。如果省略此参数，则动画会立即完成（但实际上，由于fadeOut()是基于透明度的变化，所以即使速度设置为 0，动画仍然会有一定的持续时间，只是非常短）。callback（可选）：这是一个在动画完成后执行的函数。
示例
- 基本淡出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery fadeOut() 方法</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOutButton").click(function(){
$("#myDiv").fadeOut();
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightcoral;
opacity: 1; /* 初始状态为完全可见 */
}
</style>
</head>
<body>
<button id="fadeOutButton">淡出 Div</button>
<div id="myDiv"></div>
</body>
</html>
在这个示例中，点击按钮会使可见的 div 元素逐渐变为不可见。
- 带动画速度的淡出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery fadeOut() 方法 - 带速度</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOutButton").click(function(){
$("#myDiv").fadeOut("slow"); // 使用慢速动画
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightgreen;
opacity: 1; /* 初始状态为完全可见 */
}
</style>
</head>
<body>
<button id="fadeOutButton">淡出 Div（带速度）</button>
<div id="myDiv"></div>
</body>
</html>
在这个示例中，div 元素的淡出效果会带有动画，并且速度较慢。
- 使用回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery fadeOut() 方法 - 使用回调函数</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOutButton").click(function(){
$("#myDiv").fadeOut("fast", function() {
alert("淡出完成！");
});
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightseagreen;
opacity: 1; /* 初始状态为完全可见 */
}
</style>
</head>
<body>
<button id="fadeOutButton">淡出 Div（带回调）</button>
<div id="myDiv"></div>
</body>
</html>
在这个示例中，当 div 元素的淡出效果完成后，会弹出一个提示框显示“淡出完成！”。
注意事项
- 如果元素已经是隐藏的（即
opacity为0或display属性为none），则fadeOut()方法不会有任何效果。 fadeOut()方法只改变元素的opacity属性，而不改变其display属性。但是，在动画完成后，如果元素的opacity变为0，某些 jQuery 版本可能会将display属性设置为none（这取决于 jQuery 的具体实现和版本）。- 你可以结合
fadeIn()方法来实现淡入和淡出的连续动画效果。 - 如果元素被其他 CSS 规则（如
visibility: hidden;）隐藏，fadeOut()可能无法正常工作，因为它依赖于opacity属性的变化。
总结
fadeOut() 方法是 jQuery 中用于创建淡出效果的一个非常有用的工具。通过简单地调用这个方法，你可以逐渐改变元素的透明度，从而实现平滑的淡出动画。无论是基本的淡出效果、带速度的淡出效果还是使用回调函数的复杂淡出效果，fadeOut() 方法都能很好地满足你的需求。
本文地址：https://www.tides.cn/p_jquery-fade-out