溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了jquery如何實現div漸隱效果的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇jquery如何實現div漸隱效果文章都會有所收獲，下面我們一起來看看吧。
三種實現方法：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() 方法
fadeTo() 方法允許漸變為給定的不透明度（值介于 0 與 1 之間）。
語法:
$(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如何實現div漸隱效果”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“jquery如何實現div漸隱效果”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
