動畫切換的比較 (jQuery)

1jQuery中toggle與slideToggle以及fadeToggle的比較

操做元素的顯示和隱藏能夠有幾種方法。
例如：

• 改變樣式display爲none
• 設置位置高度爲0
• 設置透明度爲0

都能達到這個目的，而且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此以外，還引入了toggle、sildeToggle以及fadeToggle切換方法

toggle、sildeToggle以及fadeToggle的區別：

• toggle：切換顯示與隱藏效果
• sildeToggle：切換上下拉卷滾效果
• fadeToggle：切換淡入淡出效果

固然細節上仍是有更多的不一樣點:

toggle與slideToggle細節區別：

• toggle：動態效果爲從右至左。橫向動做，toggle經過display來判斷切換全部匹配元素的可見性
• slideToggle：動態效果從下至上。豎向動做，slideToggle 經過高度變化來切換全部匹配元素的可見性

fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

• 元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。

• 元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。

• 註釋：隱藏的元素不會被徹底顯示（再也不影響頁面的佈局）