jQuery 淡入淡出


jQuery 效果 - 淡入淡出

#透過 jQuery，您可以實現元素的淡入淡出效果。

因為時間是寶貴的，我們提供快速方便的學習方法。

在菜鳥教學,你可以學習需要的知識。

實例

jQuery fadeIn()
示範 jQuery fadeIn() 方法。

jQuery fadeOut()
示範 jQuery fadeOut() 方法。

jQuery fadeToggle()
示範 jQuery fadeToggle() 方法。

jQuery fadeTo()
示範 jQuery fadeTo() 方法。

jQuery Fading 方法

透過 jQuery，您可以實現元素的淡入淡出效果。

jQuery 有以下四個fade 方法：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() 方法

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

語法:

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

可選的speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。 .

可選的 callback 參數是 fading 完成後所執行的函式名稱。

下面的範例示範了具有不同參數的fadeIn() 方法：

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.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 fadeOut() 方法

jQuery fadeOut() 方法用於淡出可見元素。

語法:

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

可選的speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函式名稱。

下面的範例示範了具有不同參數的fadeOut() 方法：

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.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 fadeToggle() 方法

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

如果元素已淡出，則 fadeToggle() 會在元素中加入淡入效果。

如果元素已淡入，則 fadeToggle() 會在元素中加入淡出效果。

語法:

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

可選的speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函式名稱。

下面的範例示範了具有不同參數的fadeToggle() 方法：

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});
</script>
</head>
<body>

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</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 fadeTo() 方法

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

語法:

$(
selector).fadeTo(speed,opacity,callback);
必要的speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必要的 opacity 參數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。

可選的 callback 參數是函數完成後所執行的函數名稱。

下面的範例示範了帶有不同參數的fadeTo() 方法：

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>
</head>

<body>
<p>演示 fadeTo() 使用不同参数</p>
<button>点我让颜色变淡</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>

運行實例» 點擊"運行實例" 按鈕查看線上實例

#
←
→