文章目錄

• • 1.淡入與淡出
  • • • 淡入:fadeIn([speed],[easing],[fn])
      • 淡出:fadeOut([speed],[easing],[fn])
      • 切換顯示隱藏fadeToggle([speed,[easing],[fn]])
  • 2.上下滑動
  • • • 向下滑:slideDown([speed],[easing],[fn])
      • 向上滑:slideUp([speed,[easing],[fn]])
      • 切換:slideToggle([speed],[easing],[fn])
  • 3.顯示與隱藏
  • • • 顯示:show([speed,[easing],[fn]])
      • 隱藏:hide([speed,[easing],[fn]])
      • 切換:toggle([speed],[easing],[fn])

1.淡入與淡出

原理是:不斷改變元素的透明度(opacity)來實現的

淡入:fadeIn([speed],[easing],[fn])

(淡入為帶動畫的顯示)元素style的變化過程如下:

display:block
opacity:1到0變化
display:none

淡出:fadeOut([speed],[easing],[fn])

(淡出為帶動畫的隱藏)元素style的變化過程如下:

display:none
opacity:0到1變化
display:block

切換顯示隱藏fadeToggle([speed,[easing],[fn]])

(帶動畫的切換顯示隱藏)

2.上下滑動

原理是:不斷改變元素的高度來實現的

向下滑:slideDown([speed],[easing],[fn])

通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成后可選地觸發一個回調函數。

這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。

向上滑:slideUp([speed,[easing],[fn]])

通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成后可選地觸發一個回調函數。

這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。

切換:slideToggle([speed],[easing],[fn])

如果當前狀態是伸展點擊切換就收縮，反之。

通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發一個回調函數。

這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏或顯示。在jQuery 1.3中，上下的padding和margin也會有動畫，效果更流暢。

3.顯示與隱藏

顯示:show([speed,[easing],[fn]])

顯示隱藏的匹配元素。

這個就是 ‘show( speed, [callback] )’ 無動畫的版本。如果選擇的元素是可見的，這個方法將不會改變任何東西。無論這個元素是通過hide()方法隱藏的還是在CSS里設置了display:none;，這個方法都將有效。

如果想要加動畫，就給其動畫加個時間，在變化過程中實際上改變的是高度、寬度、透明度

隱藏:hide([speed,[easing],[fn]])

隱藏顯示的元素

這個就是 ‘hide( speed, [callback] )’ 的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變任何東西。

如果想要加動畫，就給其動畫加個時間，在變化過程中實際上改變的是高度、寬度、透明度

切換:toggle([speed],[easing],[fn])

用于綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。

如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

總結

以上是生活随笔為你收集整理的jQuery-内置动画（实质）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。