3.6_淡出和滑動特效

• 確定自製動畫能運行
• animate()的padding問題修正
• 設定<div>的display:none
• animate()的toggle應用
• jquery的鍊結功能
• 傳送自訂參數給自訂的動畫
• 第一個動畫執行完後，接續下個函式動作
• 判斷有無傳入參數，以執行不同動作

---

確定自製動畫能運行

如何自製fadeSlideToggle()特效?

運用$.fn來擴充自訂的特效FadeSlideToggle，使該自訂特效能夠如內訂的jquery特效般來被使用。

運行結果，成功console出自訂的訊息

animate()的padding問題修正

fadeToggle為切換透明度(opacity)，slideToggle為切換高度(height)

執行0.5秒內高度降為0的效果

運行結果，運行縮減高度的動畫(但是padding會造成高度問題，沒有完全的讓高度降為0)

移除掉.box{padding:1em;}，就可讓高度縮減的功能完全正常

設定<div>的display:none

同時運作高度和透明度降為0的動畫

運行結果，成功運行動畫(但在console檢示，仍可看到<div class="box">，因為只是高度和透明度看不到而已，<div>仍然存在，需修改display屬性，才能完全隱藏)

設定display:none，就可以完全隱藏了

animate()的toggle應用

這次將height首opacity設為toggle(可反覆切換的屬性)

運行結果，設定為togle後，一樣是成功運行高度和透明度改變的動畫，但觀察其原始碼，可看到<div class="box">的display屬性被設為none了

而且toggle可以反覆切換，出現和消失的動畫

jquery的鍊結功能

想讓此自製的動畫具備jquery的chaining(鍊結)的功能(執行完動畫後，執行addClass('testing');)

運行結果，console中顯示錯誤訊息(因為此自製的特效尚未回傳jquery物件，所以無法達成鍊結的功能)

所要記得要在自訂的特效內寫入return，以回傳此jquery物件，以便執行下一步動作

運行結果，動畫成功運行。檢示其原始碼，可看到成功在動畫執行完後，執行了addClass('testing')，使<div class="box">成功加入了testing的樣式。

傳送自訂參數給自訂的動畫

自訂數值500做為speed參數

運行結果，動畫速度改為0.5秒內撥放完畢了

什麼都不輸入，也可正常運作，因為jquery有預設的速度

這回設定為，如果沒輸入速度，便設定速度為2000

運行結果，動畫在2秒內跑完

第一個動畫執行完後，接續下個函式動作

解說內建的jquery特效是如何在特效執行完後，在往下執行下一個內建的特效，例如slideDown執行完後，在執行swing的特效

其實swing的功能，就如同寫入function(){}而已，你可在自訂的function()內，加入你自己想要的特效功能

把function(){}當作參數傳入自訂特效中，以便讓特效執行完後，執行該自訂的function

運行結果，成功在動畫執行完後，console出complete字串

將之前的寫法function(){fn())改為fn就可以了，沒有必要在多寫一個function()來呼叫fn

記得不可以寫成fn()，因為這樣會直接執行fn()，而不會等到特效跑完後才執行

運行結果，修改完fn的寫法後，成功在動畫執行完後，console出complete字串

判斷有無傳入參數，以執行不同動作

如果沒有輸入動畫執行完後，所要執行的函數，那fn的值會為何?

運行結果，console出fn為undefined

所以要如判斷fn的值是否為函式形態呢?
至jquery的函式庫中查-isFunction來判斷此參數是否為函式

如果是函式形態，便console出'is a function'，否則為'is undefined'

運行結果，成功判斷出沒有輸入函式的情況，is undefined

這次為測式有輸入函式的情況

運行結果，成功console出有輸入函式時的判斷，is a function

解說在jquery函式庫中，有許多判斷型態的方法，如:isFunction、isArray、isWindow等等~~