jQuery—動畫總結

引言

動畫效果絢麗多彩，視覺沖擊可以使得網頁互動時具有很好的吸引力。

常用動畫

• hide()和show()

同時修改多個樣式屬性（高度、寬度及透明度），這是非常基礎的一對動畫，常常聯合起來一起使用，顯示或隐藏一些元素，非常友善。

• fadeIn()和fadeOut()

隻改變透明度，fadeIn()實作的功能是在一段時間内增加元素的不透明度，fadeOut()則相反。

• slideUp()和slideDown()

隻改變元素的高度。slideUp()實作元素由下到上縮短顯示，slideDown()實作元素由上到下延伸顯示。

• fadeTo()

隻改變透明度。可以把元素的不透明度以漸進的方式改變到指定值。

• toggle()

切換元素的可見狀态。可以用于替代hide()和show()。

• slideToggle()

通過高度的變化切換比對元素的可見性。可以用于替代slideUp()和slideDown()。

• fadeToggle()

通過不可見度的變化切換比對元素的可見性。可以用于替代fadeIn()和fadeOut()。

萬能動畫

animate():自定義動畫，可以實作任何動畫，關鍵是其參數的設定。

• 一組元素上的動畫效果

1. 當一個animate()中使用多個屬性時，動畫是同時的。
2. 采用鍊式法來寫則是順序動畫。

• 多組元素上的動畫效果

1. 預設動畫是同時發生的。
2. 采用回調形式應用動畫時則是按照回調順序發生的。

總結

動畫雖然豐富，但是也要展現動畫的功能性，不能為了動畫而動畫，否則是沒有必要的，如果可以直接采用css動畫就能完成的就沒必要使用JS了，而且更為重要的是動畫的優美感和适用性。