jQuery fadeOut|极客教程

jQuery fadeOut

在前端开发中，我们经常会遇到需要隐藏元素的需求。而fadeOut()方法是jQuery中用来实现元素渐隐效果的一种方法。通过这个方法，我们可以让页面上的元素逐渐消失，而不是直接隐藏掉。

语法

fadeOut()方法的语法非常简单：

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

selector：表示需要进行渐隐效果的元素选择器。
speed：可选参数，用来设置渐隐的速度。可以是毫秒值，也可以是slow、fast或者normal。
callback：可选参数，当渐隐动画完成后需要执行的回调函数。

示例

下面我们来看一个简单的示例，让一个按钮点击后逐渐隐藏一个<div>元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery fadeOut Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myDiv" style="width: 200px; height: 200px; background-color: red;"></div>
<button id="hideButton">Hide Div</button>

<script>
 $(document).ready(function(){$ ("#hideButton").click(function(){
        $("#myDiv").fadeOut();
    });
});
</script>

</body>
</html>

在这个示例中，我们先创建了一个红色的<div>，然后有一个按钮，点击按钮后会调用fadeOut()方法，使得<div>元素逐渐消失。

参数设置

除了直接调用fadeOut()方法，我们也可以传入参数来对动画进行个性化设置。比如下面的示例，我们设置动画的速度为slow，并在动画完成后弹出一个提示框：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery fadeOut Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="myDiv" style="width: 200px; height: 200px; background-color: red;"></div>
<button id="hideButton">Hide Div</button>

<script>
 $(document).ready(function(){$ ("#hideButton").click(function(){
        $("#myDiv").fadeOut("slow", function(){
            alert("Element faded out!");
        });
    });
});
</script>

</body>
</html>

在这个示例中，我们传入了字符串"slow"作为参数，使得动画速度变慢，然后在动画完成后会弹出一个提示框。