jQuery |淡入淡出()方法(1)

📌 相关文章

📜 jQuery |淡入淡出()方法(1)

📅 最后修改于: 2023-12-03 14:43:16.295000 🧑 作者: Mango

jQuery | 淡入淡出()方法

jQuery淡入淡出()方法是一种渐进式的动画效果，可以让元素在渐进式地出现或消失。简单而言，就是能够通过一种渐变的动画效果来隐藏或显示元素。

基本语法

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

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

fadeIn和fadeOut方法的语法基本相同，参数如下：

selector: 必需。需要淡入或淡出的元素。
speed：可选。可以设置渐变的速度。可以是 "slow"、"usual" 和 "fast" 或者是毫秒为单位的数值。
callback：可选。在淡入或淡出完成之后需要执行的回调函数。

示例

以下代码将通过点击按钮来淡入或淡出内容：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>

<button>切换</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

在这个例子中，我们定义了三个div, 分别用不同的颜色进行了背景填充。我们再定义了一个按钮，通过点击它，我们可以看到三个div依次淡入或淡出。

淡出和淡入

fadeIn()实现淡入效果，透明度由 0 到 1。
fadeOut()实现淡出效果,透明度由 1 到 0。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>

<button>切换</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;display:none;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;display:none;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;display:none;"></div>

</body>
</html>

在这个例子中，当我们点击按钮时，三个div将显示淡入效果并从透明的状态渐变为不透明状态。

总结

使用jQuery的淡入淡出()方法可实现元素渐变效果的显示和隐藏。通过设置渐变速度，我们可以创建不同的效果。这种方法在很多情况下都很有用，比如在网站设计中可以用来显示或隐藏注释，提示或图像。