jQuery中fadeIn、fadeOut、fadeTo的使用方法
fadeIn
fadeIn()方法用于淡入被选元素。它会让被选元素透明度从0逐渐上升至1，从而呈现出淡入的效果。
语法
$(selector).fadeIn(speed,callback);
参数
| 参数 | 描述 |
|---|---|
speed |
可选。规定淡入效果的时长。 |
callback |
可选。该函数在淡入完成后执行。用于定义淡入效果完成后要执行的动作。 |
示例
下面是一个简单的示例，用于淡入图片。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#pic").fadeIn();
});
});
</script>
</head>
<body>
<button>淡入图片</button>
<br>
<br>
<img id="pic" src="https://via.placeholder.com/150" style="display:none;">
</body>
</html>
在上面的示例中，点击按钮后，图片会以淡入的方式显示出来。
fadeOut
fadeOut()方法用于淡出被选元素。在进行淡出动画之后，被选元素会逐渐消失并隐藏。
语法
$(selector).fadeOut(speed,callback);
参数
| 参数 | 描述 |
|---|---|
speed |
可选。规定淡出效果的时长。 |
callback |
可选。该函数在淡出完成后执行。用于定义淡出效果完成后要执行的动作。 |
示例
下面是一个简单的示例，用于淡出图片。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#pic").fadeOut();
});
});
</script>
</head>
<body>
<button>淡出图片</button>
<br>
<br>
<img id="pic" src="https://via.placeholder.com/150">
</body>
</html>
在上面的示例中，点击按钮后，图片会以淡出的方式消失并隐藏。
fadeTo
fadeTo()方法将被选元素的透明度从指定的值逐渐改变为指定的不透明度。具体来说，该方法有两个参数：speed（可选）和opacity（必须）。
语法
$(selector).fadeTo(speed,opacity,callback);
参数
| 参数 | 描述 |
|---|---|
speed |
可选。规定淡入/淡出效果的时长。 |
opacity |
必须。规定元素的不透明度。值介于0和1之间。 |
callback |
可选。该函数在淡入/淡出完成后执行。用于定义淡入/淡出效果完成后要执行的动作。 |
示例
下面是一个简单的示例，用于将图片的透明度从0逐渐改变为1。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#pic").fadeTo("slow",1);
});
});
</script>
</head>
<body>
<button>改变图片透明度</button>
<br>
<br>
<img id="pic" src="https://via.placeholder.com/150" style="opacity:0;">
</body>
</html>
在上面的示例中，点击按钮后，图片的透明度会从0逐渐改变为1，呈现出淡入的效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏) - Python技术站
微信扫一扫 
支付宝扫一扫 