jquery怎麼實現div漸隱效果
- 青灯夜游原創
- 2022-09-14 18:42:172036瀏覽
三種實作方法：1、用fadeOut()逐漸改變被選元素的不透明度，從可見到隱藏，語法「元素物件.fadeIn(漸隱時長)」；2、用fadeTo()逐漸改變被選元素的不透明度，語法「元素物件.fadeTo(漸隱時長,0)」；3、用fadeToggle()逐漸改變被選元素的不透明度，語法「元素物件.fadeToggle(漸隱時長) 」。
本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。
在jquery中，能實現div漸隱效果的有三個方法：
#fadeOut() 方法
fadeToggle () 方法
fadeTo() 方法
1、fadeOut() 方法
fadeOut () 方法逐漸改變被選元素的不透明度，從可見到隱藏（漸隱褪色效果）。
語法：
$(selector).fadeOut(speed,easing,callback)
| 參數 | #描述 |
|---|---|
| speed | 可選。規定褪色效果的速度。 可能的值：
|
| easing | 可選。規定在動畫的不同點上元素的速度。預設值為 "swing"。 可能的值：
|
| callback | 可選。 fadeOut() 方法執行完之後，要執行的回呼函數。 |
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击渐隐div元素。</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>
#2、fadeTo() 方法
$(selector).fadeTo(speed,opacity,callback);#########必需的 speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。 ############fadeTo() 方法中必要的 opacity 參數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。 ############可選的 callback 參數是函數完成後所執行的函數名稱。 ############只需要將opacityc參數的值設為0，即可達到漸隱效果。 ###
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeTo("fast",0);
$("#div2").fadeTo("slow",0);
$("#div3").fadeTo(3000,0);
});
});###############3、fadeToggle() 方法#########fadeToggle() 方法可以在fadeIn() 與fadeOut() 方法之間進行切換。 ############如果元素已隱藏，則 fadeToggle() 會在元素中加入淡入效果。 ############如果元素已顯示，則 fadeToggle() 會在元素上新增淡出效果。 #########$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(5000);
});
});############【推薦學習：###jQuery影片教學###、###web前端###】###以上是jquery怎麼實現div漸隱效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn