首頁 > 文章 > web前端 > jquery淡入是哪個方法

jquery淡入是哪個方法

青灯夜游原創: 2022-05-17 14:49:062162瀏覽

淡入有3種方法：1、fadeIn()，可以淡入隱藏元素，語法「元素物件.fadeIn(淡入時長)」；2、fadeTo()，語法「元素物件.fadeTo(長度, 1)」；3、fadeToggle()，語法「物件.fadeToggle(時長)」。

jquery淡入是哪個方法

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

在jquery中，能實現淡入效果的有三個方法：

fadeIn() 方法
fadeToggle()方法
fadeTo() 方法

1、fadeIn() 方法

fadeIn()用於淡入已隱藏的元素。

語法:

$(selector).fadeIn(speed,callback);

可選的 speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。 .
可選的 callback 參數是 fading 完成後所執行的函式名稱。

範例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeIn();
					$("#div2").fadeIn("slow");
					$("#div3").fadeIn(3000);
				});
			});
		</script>
	</head>

	<body>
		<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
		<button>点击淡入 div 元素。</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
		<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
		<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

	</body>
</html>

jquery淡入是哪個方法

#2、fadeTo() 方法

fadeTo( ) 方法允許漸變為給定的不透明度（值介於0 與1 之間）。

語法:

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必要的 opacity 參數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。
可選的 callback 參數是函數完成後所執行的函數名稱。

只需要將opacityc參數的值設為1，即可達到淡入效果。

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeTo("fast",1);
		$("#div2").fadeTo("slow",1);
		$("#div3").fadeTo(5000,1);
	});
});

jquery淡入是哪個方法

3、fadeToggle() 方法

fadeToggle() 方法可以在fadeIn() 與fadeOut()方法之間進行切換。

如果元素已隱藏，則 fadeToggle() 會在元素中加入淡入效果。
如果元素已顯示，則 fadeToggle() 會在元素上新增淡出效果。

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(5000);
	});
});

jquery淡入是哪個方法

【推薦學習：jQuery影片教學、web前端影片】

以上是jquery淡入是哪個方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

jquery 对象

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery有哪些取值方式下一篇：jquery有哪些取值方式

看更多