jQuery-4.動畫篇---淡入淡出效果
jQuery中淡出動畫fadeOut
讓元素在頁面不可見，常用的辦法就是通過設置樣式的display:none。除此之外還可以一些類似的辦法可以達到這個目的。這裏要提一個透明度的方法，設置元素透明度為0，可以讓元素不可見，透明度的參數是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。
fadeOut()函數用於隱藏所有匹配的元素，並帶有淡出的過渡動畫效果
所謂"淡出"隱藏的，元素是隱藏狀態不對作任何改變，元素是可見的，則將其隱藏。
.fadeOut( [duration ], [ complete ] )
通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。
字符串 ‘fast‘ 和 ‘slow‘ 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那麽默認使用400毫秒的延時
<h2>fadeOut</h2>
<p>測試文字淡入效果</p>
<p>專註分享</p>
淡出的隱藏效果：
<select id="animation">
<option value="1">fadeOut( )</option>
<option value="2">fadeOut( "slow" )</option>
<option value="4">fadeOut( 1000, complete )</option>
<option value="5">fadeOut( 1000, "linear" )</option>
<option value="6">fadeOut( options )</option>
</select>
</br></br>
<input id="btnFadeOut" type="button" value="點擊淡出隱藏" />
<input id="btnShow" type="button" value="顯示" />
<script type="text/javascript">
//【顯示】按鈕
$("#btnShow").click(function() {
$("p").show();
});
//【隱藏】按鈕
$("#btnFadeOut").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeOut();
} else if (v == "2") {
$("p").fadeOut("slow");
} else if (v == "3") {
$("p").fadeOut(3000);
} else if (v == "4") {
$("p").fadeOut(2000, function() {
alert("隱藏完畢!");
});
} else if (v == "5") {
$("p").fadeOut(1000, "linear");
} else if (v == "6") {
$("p").fadeOut({
duration: 1000
});
}
});
</script>
jQuery中淡入動畫fadeIn
fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上兩者都是一致的，只是結果相反
.fadeIn( [duration ], [ complete ] )
- duration：指定過渡動畫運行多長時間(毫秒數)，默認值為400。該參數也可以為字符串"fast"(=200)或"slow"(=600)。
- 元素顯示完畢後需要執行的函數。函數內的this指向當前DOM元素。
fadeIn()函數用於顯示所有匹配的元素，並帶有淡入的過渡動畫效果。
註意：
- 淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100%
- 如果元素本身是可見的，不對其作任何改變。如果元素是隱藏的，則使其可見
<h2>fadeIn</h2>
<p>測試文字淡出效果</p>
<p>專註分享</p>
選擇：淡出的隱藏效果
</br>
</br>
<select id="animation">
<option value="1">fadeIn( )</option>
<option value="2">fadeIn( "slow" )</option>
<option value="3">fadeIn( 3000 )</option>
<option value="4">fadeIn( 2000, complete )</option>
<option value="5">fadeIn( 1000, "linear" )</option>
<option value="6">fadeIn( options )</option>
</select>
</br></br>
<input id="btnFadeIn" type="button" value="執行淡出效果" />
<input id="btnHide" type="button" value="點擊隱藏" />
<script type="text/javascript">
//【顯示】按鈕
$("#btnFadeIn").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeIn();
} else if (v == "2") {
$("p").fadeIn("slow");
} else if (v == "3") {
$("p").fadeIn(3000);
} else if (v == "4") {
$("p").fadeIn(2000, function() {
alert("顯示完畢!");
});
} else if (v == "5") {
$("p").fadeIn(1000, "linear");
} else if (v == "6") {
$("p").fadeIn({
duration: 1000
});
}
});
// 【隱藏】按鈕
$("#btnHide").click(function() {
$("p").hide();
});
</script>
jQuery中淡入淡出切換fadeToggle
fadeToggle()函數用於切換所有匹配的元素，並帶有淡入/淡出的過渡動畫效果。之前也學過toggle、slideToggle 也是類似的處理方式
fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。
常用語法：.fadeToggle( [duration ] ,[ complete ] )
可選的 duration 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數是 fadeToggle完成後所執行的函數名稱。
fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
<h2>fadeToggle</h2>
<p>測試文字淡入淡出切換效果</p>
<p>專註分享</p>
淡入淡出的隱藏效果：
<select id="animation">
<option value="1">fadeToggle( )</option>
<option value="2">fadeToggle( "slow" )</option>
<option value="3">fadeToggle( 3000 )</option>
<option value="4">fadeToggle( 1000, complete )</option>
<option value="5">fadeToggle( 1000, "linear" )</option>
<option value="6">fadeToggle( options )</option>
</select>
<input id="btnFadeSwitch" type="button" value="點擊切換顯示/隱藏">
<script type="text/javascript">
//【切換顯示/隱藏】按鈕
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeToggle();
} else if (v == "2") {
$("p").fadeToggle("slow");
} else if (v == "3") {
$("p").fadeToggle(3000);
} else if (v == "4") {
$("p").fadeToggle(1000, function() {
alert("切換完畢!");
});
} else if (v == "5") {
$("p").fadeToggle(1000, "linear");
} else if (v == "6") {
$("p").fadeToggle({
duration: 1000
});
}
});
</script>
jQuery中淡入效果fadeTo
淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區間要麽是0，要麽是1
fadeIn：淡入效果，內容顯示，opacity是0到1 fadeOut：淡出效果，內容隱藏，opacity是1到0
如果要讓元素保持動畫效果，執行opacity = 0.5的效果時，要如何處理？
如果不考慮CSS3，我們用JS實現的話，基本就是通過定時器，在設定的時間內一點點的修改opacity的值，最終為0.5，原理雖說簡單，但是總不如一鍵設置這麽舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位
語法
.fadeTo( duration, opacity ,callback)
必需的 duration參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）。可選的 callback 參數是該函數完成後所執行的函數名稱。
<h2>fadeTo</h2>
<p>測試文字透明度效果</p>
<p>專註分享</p>
透明度的設置效果：
<select id="animation">
<option value="1">fadeTo( "slow" ,0.5 )</option>
<option value="2">fadeTo( 1000 ,0.2 )</option>
<option value="3">fadeTo( 1000 ,0.9 ,complete)</option>
</select>
<input id="btnFadeSwitch" type="button" value="點擊切換顯示/隱藏">
<script type="text/javascript">
//【切換顯示/隱藏】按鈕
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeTo("slow", 0.5);
} else if (v == "2") {
$("p").fadeTo(1000, 0.2);
} else if (v == "3") {
$("p").fadeTo(1000, 0.9, function() {
alert(‘完成‘)
});
}
});
</script>
jQuery-4.動畫篇---淡入淡出效果