1.定義和用法
jQuery 擁有下面四種 fade 方法：
fadeIn()：用於淡入已隱藏的元素
語法：$(selector).fadeIn(speed,callback);
fadeOut()：用於淡出可見元素。
語法：$(selector).fadeOut(speed,callback);
fadeToggle()：可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
語法：$(selector).fadeToggle(speed,callback);
fadeTo()：允許漸變為給定的不透明度（值介於 0 與 1 之間）。
語法：$(selector).fadeTo(speed,opacity,callback);
示例：
<body>
<div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
</div>
<button id="btn1">fadeIn</button>
<button id="btn2">fadeOut</button>
<button id="btn3">fadeToggle</button>
<button id="btn4">fadeTo</button>
<script type="text/javascript">
$(document).ready(function(){
var $div = $("#box1")
// 淡入
$("#btn1").click(function(){
$div.fadeIn("1000",function(){
console.log("淡入")
})
})
// 淡出
$("#btn2").click(function(){
$div.fadeOut("1000",function(){
console.log("淡出")
})
})
// 一個按鈕實現顯示隱藏
$("#btn3").click(function(){
$div.fadeToggle("1000",function(){
console.log("自動切換")
})
})
// 漸變為給定的不透明度
$("#btn4").click(function(){
$div.fadeTo("1000",0.2,function(){
console.log("修改透明底")
})
})
})
</script>
</body>
輸出：
