資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究解釋 jQuery 中淡入淡出效果的概念？
jQuery 淡入淡出效果結合了顯示和隱藏某些專案的能力，同時也包含了過渡動畫。您可以觀察到元素逐漸淡入淡出，而不是立即出現和消失。這樣的效果可以讓網站看起來更壯觀，體驗更愉悅。
在 jQuery 中建立淡入淡出效果的方法有很多，例如 .fadeIn()、.fadeOut()、.fadeToggle() 和 .fadeTo()。讓我們逐一瞭解它們。
jQuery fadeIn() 方法
.fadeIn() 方法用於對匹配元素的透明度進行動畫處理。它與 .fadeTo() 方法相同，只是它不會顯示元素，也不會讓您選擇最大透明度級別。
語法
以下是 fadeIn() 方法的語法
.fadeIn( [duration ], [ complete ] )
示例
以下是一個示例，我們將使用 fadeIn() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
button {
color: #DE3163;
cursor: pointer;
}
div {
margin: 2px;
width: 90px;
display: none;
height: 50px;
float: left;
}
#tp1 {
background: #BB8FCE;
}
#tp2 {
background: #85C1E9;
}
body {
text-align: center;
background-color: #D5F5E3;
font-family: verdana;
height:100px;
}
</style>
</head>
<body>
<button>Click The Button</button>
<div id="tp1">Welcome To</div>
<div id="tp2">TP</div>
<script>
$(document.body).click(function() {
$("div:hidden").first().fadeIn("fast");
});
</script>
</body>
</html>
當我們執行上述指令碼時，它將在網頁上生成一個包含點選按鈕的輸出。當用戶點選按鈕時，事件被觸發，並在網頁上顯示一個隱藏的 div。
jQuery fadeout() 方法
.fadeOut() 方法即時更改匹配元素的透明度。當透明度達到零時，display 樣式屬性將設定為 none，此時元素不再影響頁面佈局。
語法
以下是 fadeOut() 方法的語法
$(selector).fadeOut(speed,easing,callback)
示例
考慮以下示例，我們將使用 fadeOut() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
p {
font-size: 200%;
cursor: pointer;
font-family: verdana;
color: #DE3163;
}
body {
background-color: #D6EAF8;
}
</style>
</head>
<body>
<p>WELCOME , If you click on me I'll get disappear.!</p>
<script>
$("p").click(function() {
$("p").fadeOut("slow");
});
</script>
</body>
</html>
執行上述指令碼後，輸出視窗將彈出，在網頁上顯示文字。當用戶嘗試點選文字時，事件被觸發，使文字從網頁上淡出。
jQuery fadeToggle() 方法
fadeToggle() 方法可以切換 fadeIn() 和 fadeOut() 方法。透過使用 fadeToggle() 方法，如果要淡出特定元素，則可以將其淡入。反之亦然，如果元素已淡入，則也可以使用 fadeToggle() 方法將其淡出。
語法
以下是 faddeToggle() 方法的語法
$(selector).fadeToggle(speed,easing,callback)
示例
在以下示例中，我們將使用 jQuery fadeToggle() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.tp {
display: flex;
align-items: center;
justify-content: center;
background-color: #D5F5E3;
height: 500px;
}
h1 {
color: #DE3163;
display: none;
}
.tutorial {
position: absolute;
top: 520px;
height: 60px;
width: 150px;
background-color: #FCF3CF;
border-radius: 50px;
border: none;
color: #A569BD;
font-size: 19px;
font-weight: bold;
font-family: verdana;
}
</style>
</head>
<body>
<div class="tp">
<button class="tutorial">Click to Toggle</button>
<h1 id="text">WELCOME.!</h1>
</div>
<script>
$(".tutorial").click(function() {
$("#text").fadeToggle('400');
});
</script>
</body>
</html>
當我們執行上述程式碼時，它將在網頁上生成一個包含按鈕以及應用了 CSS 背景的輸出。當用戶點選按鈕時，事件被觸發並顯示文字；反之，當用戶再次點選按鈕時，事件被觸發，文字消失。
jQuery fadeTo() 方法
使用 jQuery fadeTo() 方法時，元素不會預設淡入淡出；相反，我們將提供所需的透明度值以使元素淡入或淡出。
語法
以下是 fadeTo() 方法的語法
$(selector).fadeTo(speed,opacity,easing,callback)
示例
讓我們看以下示例，我們將使用 fadeTo() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
body {
font-family: verdana;
background-color: #E8DAEF;
color: #DE3163;
}
</style>
</head>
<body>
<p>Click on me, to observe decrease in my opacity</p>
<script>
$("p").first().click(function() {
$(this).fadeTo("400", 0.20);
});
</script>
</body>
</html>
執行上述指令碼後，輸出視窗將彈出，在網頁上顯示文字以及應用了 CSS 背景的輸出。當用戶嘗試點選文字時，事件被觸發，並開始淡入到我們指定的數值。
86 次檢視
