技術文章 » jquery淡入是哪個方法

jquery淡入是哪個方法

2022-05-17 16:00:29

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

本教學操作環境：windows7系統、jquery1.10.2版本、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-1.10.2.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>

1.gif

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);
	});
});

2.gif

3、fadeToggle() 方法

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

  • 如果元素已隱藏，則 fadeToggle() 會向元素新增淡入效果。

  • 如果元素已顯示，則 fadeToggle() 會向元素新增淡出效果。

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

3.gif

【推薦學習：、】

以上就是jquery淡入是哪個方法的詳細內容，更多請關注TW511.COM其它相關文章！