jQuery fadeIn()方法
栏目：
jquery
发布时间：2024-12-24
jQuery 的 fadeIn() 方法是一个非常实用的动画效果函数，它用于逐渐改变被选元素的透明度，从而实现淡入效果。这个方法只适用于被隐藏的元素（即 display 属性不为 none 但 opacity 属性为 0 的元素，或者初始状态下 opacity 为 0 的元素）。如果元素已经是可见的（opacity 大于 0），则 fadeIn() 方法不会有任何效果。
基本用法
fadeIn() 方法的基本语法如下：
$(selector).fadeIn(speed, callback);
selector：这是一个 jQuery 选择器，用于选择你想要应用淡入效果的元素。speed（可选）：动画的速度。可以是字符串"slow"（600 毫秒）、"fast"（200 毫秒）或数字（表示毫秒数）。如果省略此参数，则动画会立即完成（但实际上，由于fadeIn()是基于透明度的变化，所以即使速度设置为 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 fadeIn() 方法</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeInButton").click(function(){
$("#myDiv").fadeIn();
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightcoral;
opacity: 0; /* 初始状态为完全透明 */
}
</style>
</head>
<body>
<button id="fadeInButton">淡入 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 fadeIn() 方法 - 带速度</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeInButton").click(function(){
$("#myDiv").fadeIn("slow"); // 使用慢速动画
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightgreen;
opacity: 0; /* 初始状态为完全透明 */
}
</style>
</head>
<body>
<button id="fadeInButton">淡入 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 fadeIn() 方法 - 使用回调函数</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeInButton").click(function(){
$("#myDiv").fadeIn("fast", function() {
alert("淡入完成！");
});
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightseagreen;
opacity: 0; /* 初始状态为完全透明 */
}
</style>
</head>
<body>
<button id="fadeInButton">淡入 Div（带回调）</button>
<div id="myDiv"></div>
</body>
</html>
在这个示例中，当 div 元素的淡入效果完成后，会弹出一个提示框显示“淡入完成！”。
注意事项
- 如果元素已经是可见的（即
opacity大于0），则fadeIn()方法不会有任何效果。 fadeIn()方法会改变元素的opacity属性，但不会改变其display属性。即使元素最初是display: none;的，fadeIn()也会先将其display设置为适当的值（如block、inline等），然后再改变opacity。但是，如果元素被其他 CSS 规则（如visibility: hidden;）隐藏，fadeIn()可能无法正常工作。- 你可以结合
fadeOut()方法来实现淡出和淡入的连续动画效果。
总结
fadeIn() 方法是 jQuery 中用于创建淡入效果的一个非常有用的工具。通过简单地调用这个方法，你可以逐渐改变元素的透明度，从而实现平滑的淡入动画。无论是基本的淡入效果、带速度的淡入效果还是使用回调函数的复杂淡入效果，fadeIn() 方法都能很好地满足你的需求。
本文地址：https://www.tides.cn/p_jquery-fade-in