jQuery三組基本動畫與自定義動畫的方法

這篇文章主要講解了jQuery三組基本動畫與自定義動畫的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

jQuery提供了三組基本動畫，分別是顯示與隱藏、淡入與淡出、滑入與畫出，這三組基本動畫都是標準的、有規律的的效果，jQuery還提供了一個自定義動畫。

1、顯示（show）與隱藏（hide）

顯示(show)與隱藏(hide)是一組動畫

1.1 show方法

show([speed,[easing],[callback]])

• 參數speed，可選，動畫的執行時間

  • 如果不傳，就沒有動畫效果。

  • 毫秒值(比如1000),動畫在1000毫秒執行完成(推薦)

  • 固定字符串，slow(200)、normal(400)、fast(600)，如果傳其他字符串，則默認為normal。

• 參數callback，可選，執行完動畫后執行的回調函數，每個元素執行一次。

• 參數easing，可選，這里先不講，后面統一講

1.2 hide方法

與show方法的用法完全一致。

1.3 原理

show和hide修改的是元素的width、height、opacity。

2、滑入（sliderDown）與隱藏（sliderUp）

滑入(slideUp)與滑出(slideDown)是一組動畫，效果與卷簾門類似
slideUp/slideDown,使用方法與show/hide基本一致。

2.1 用法

slideDown([speed],[easing],[callback])

• 參數speed，可選，動畫的執行時間

  • 如果不傳，默認為normal，注意區分show/hide

  • 毫秒值(比如1000),動畫在1000毫秒執行完成(推薦)

  • 固定字符串，slow(200)、normal(400)、fast(600)，如果傳其他字符串，則默認為normal。

• 參數callback，可選，執行完動畫后執行的回調函數，每個元素執行一次。

• 參數easing，可選，這里先不講，后面統一講

2.2 滑入畫出切換（slideToggle）

$(selector).slideToggle(speed,callback);
如果是隱藏狀態，那么執行slideDown操作，如果是顯示狀態，那么執行slideUp操作。

2.3 原理

slideDown和slideUp修改的是元素的height，通過高度變化（向下、向上增大）來動態地顯示所有匹配的元素。

3、淡入（fadeIn）與淡出（fadeOut）

fadeIn/fadeOut使用方法與show/hide、slideDown/slideUp一致。

3.1 用法

fadeIn([speed],[easing],[callback])

• 參數speed，可選，動畫的執行時間

  • 如果不傳，默認為normal

  • 毫秒值(比如1000),動畫在1000毫秒執行完成(推薦)

  • 固定字符串，slow(200)、normal(400)、fast(600)，如果傳其他字符串，則默認為normal。

• 參數callback，可選，執行完動畫后執行的回調函數，每個元素執行一次。

• 參數easing，可選，這里先不講，后面統一講

3.2 淡入淡出切換（fadeToggle）

fadeToggle([speed,[easing],[callback]])
如果當前元素處于隱藏狀態，那么執行fadeIn操作，如果處于顯示狀態，那么執行fadeOut操作。

3.3 淡入淡出到某個值（fadeTo）

fadeTo(speed,opacity,[easing],[callback]])
把所有匹配元素的不透明度以漸進方式調整到指定的不透明度

• 參數speed，必須

• 參數opacity，0-1之間的數值(比如0.4)，表示淡到某一個值。

• 參數callback，可選，執行完動畫后執行的回調函數，每個元素執行一次。

與淡入淡出的區別：淡入淡出只能控制元素的不透明度從 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具體值。并且時間參數是必需的！

fade系列方法：修改的是元素的opacity。

4、三組基本動畫總結

1. Query給我們提供了三組動畫，show/hide、slideUp/slideDown、fadeIn/fadeOut。

2. 動畫切換方法：slideToggle、fadeToggle，注意：show和hide沒有切換的方法。

3. 淡入淡出到某個值：fadeTo方法。

4. show/slideDown/fadeIn三個是顯示效果、hide/slideUp/fadeOut三個是隱藏效果。

5. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。這三種方法修改的這些值，都是帶數字的，因為帶了數字才能做漸變。

5、自定義動畫（animate）

animate(params,[speed],[easing],[callback])

• 參數params，必須，要執行動畫的CSS屬性，帶數字

• 參數speed，可選，執行動畫時長

• 參數easing，可選，這里先不講，后面統一講

• 參數callback，可選，執行完動畫后執行的回調函數，每個元素執行一次。

6、easing參數

現在來說說easing參數的作用，這個參數是控制動畫的速度樣式，這個參數只有兩個取值：

• swing：擺鐘運動，在開頭和結尾移動慢，在中間移動速度快。

• linear：勻速移動。

在不指定easing參數時，jQuery動畫默認值是swing。

7、動畫隊列

在同一個元素上執行多個動畫，那么對于這個動畫來說，后面的動畫會被放到動畫隊列中，等前面的動畫執行完成了才會執行（聯想：地鐵進站）。

8、停止動畫

要停止動畫，可以使用stop()方法。stop(clearQueue, jumpToEnd)。

8.1、stop()

stop方法接受兩個參數，這個兩個參數都是可選的，為Boolean值：

• clearQueue，是否清除動畫隊列；

• jumpToEnd，是否跳轉到動畫的最終效果。

當然了，一般我們不需要傳遞參數，直接使用stop()。如果直接使用stop()方法，則會理解停止當前正在執行的動畫，如果接下來還有動畫等待進行，則以當前狀態開始接下來的動畫。

8.2、判斷元素是否處于動畫狀態

動畫積累：在使用animate()方法的時候，要避免動畫積累而導致的動畫與用戶的行為不一致。當用戶快速在某個元素上執行animate動畫時，就會出現動畫積累。

解決方法是判斷元素是否處于動畫狀態，如果元素不處于動畫狀態，才為元素添加新的動畫，否則不添加。

if( ! $(element).is(":animate") ){  //判斷元素是否正處于動畫狀態
  //如果當前沒有進行動畫，則添加新的動畫
}

看完上述內容，是不是對jQuery三組基本動畫與自定義動畫的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。