當前位置：首頁 >

jQuery-内置动画（实质）

發(fā)布時間：2025/3/21 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery-内置动画（实质）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

文章目錄

- 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)來實現(xiàn)的

淡入: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.上下滑動

原理是:不斷改變元素的高度來實現(xiàn)的

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

通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。

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

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

通過高度變化（向上減小）來動態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)。

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

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

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

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

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

3.顯示與隱藏

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

顯示隱藏的匹配元素。

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

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

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

隱藏顯示的元素

這個就是 ‘hide( speed, [callback] )’ 的無動畫版。如果選擇的元素是隱藏的，這個方法將不會改變?nèi)魏螙|西。