jquery怎麼實現div漸隱效果-前端問答-PHP中文網

jquery怎麼實現div漸隱效果

青灯夜游

發布： 2022-09-14 18:42:17

原創

2005 人瀏覽過

三種實作方法：1、用fadeOut()逐漸改變被選元素的不透明度，從可見到隱藏，語法「元素物件.fadeIn(漸隱時長)」；2、用fadeTo()逐漸改變被選元素的不透明度，語法「元素物件.fadeTo(漸隱時長,0)」；3、用fadeToggle()逐漸改變被選元素的不透明度，語法「元素物件.fadeToggle(漸隱時長) 」。

jquery怎麼實現div漸隱效果

本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。

在jquery中，能實現div漸隱效果的有三個方法：

#fadeOut() 方法
fadeToggle () 方法
fadeTo() 方法

1、fadeOut() 方法

fadeOut () 方法逐漸改變被選元素的不透明度，從可見到隱藏（漸隱褪色效果）。

語法：

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

登入後複製

參數	#描述
speed	可選。規定褪色效果的速度。可能的值：毫秒 "slow" "fast"
easing	可選。規定在動畫的不同點上元素的速度。預設值為 "swing"。可能的值： "swing" - 在開頭/結尾移動慢，在中間移動快 "linear" - 勻速移動提示：擴充插件中提供更多可用的easing 函數。
callback	可選。 fadeOut() 方法執行完之後，要執行的回呼函數。

參數

#描述

speed

可選。規定褪色效果的速度。

可能的值：

毫秒
"slow"
"fast"

easing

可選。規定在動畫的不同點上元素的速度。預設值為 "swing"。

可能的值：

"swing" - 在開頭/結尾移動慢，在中間移動快
"linear" - 勻速移動

提示：擴充插件中提供更多可用的easing 函數。

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>

登入後複製

jquery怎麼實現div漸隱效果

#2、fadeTo() 方法

jquery怎麼實現div漸隱效果

################################################################################################# #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影片教學###、###web前端###】###

以上是jquery怎麼實現div漸隱效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！