jQuery 效果 ——fadeIn() 方法、fadeOut() 方法
阿新 • • 發佈：2019-02-05
fadeIn() 方法
定義和用法
fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的。
語法
$(selector).fadeIn(speed,callback)
| 引數 | 描述 |
|---|---|
| speed | 可選。規定元素從隱藏到可見的速度。預設為 "normal"。可能的值：毫秒 （比如 1500）"slow" "normal" "fast" 在設定速度的情況下，元素從隱藏到可見的過程中，會逐漸地改變其透明度（這樣會創造淡入效果） |
| callback | 可選。fadeIn 函式執行完之後，要執行的函式。 |
提示和註釋
提示：如果元素已經顯示，則該效果不產生任何變化，除非規定了 callback 函式。
註釋：該效果適用於通過 jQuery 隱藏的元素，或在 CSS 中宣告 display:none 的元素（但不適用於 visibility:hidden 的元素）。
例項：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" fadeOut()方法
定義和用法
fadeOut() 方法使用淡出效果來隱藏被選元素，假如該元素是隱藏的。
語法
$(selector).fadeOut(speed,callback)
| 引數 | 描述 |
|---|---|
| speed | 可選。規定元素從可見到隱藏的速度。預設為 "normal"。可能的值：毫秒 （比如 1500）"slow" "normal" "fast" 在設定速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其透明度（這樣會創造淡入效果） |
| callback | 可選。fadeIn 函式執行完之後，要執行的函式。 |
提示和註釋
提示：如果元素已經隱藏，則該效果不產生任何變化，除非規定了 callback 函式。
例項：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用淡入效果來顯示一個隱藏的 <p> 元素</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>