jquery淡入是哪個方法

青灯夜游
發布: 2022-06-07 17:39:29
原創
2178 人瀏覽過

淡入有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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板