jQuery三組基本動(dòng)畫與自定義動(dòng)畫的方法

這篇文章主要講解了jQuery三組基本動(dòng)畫與自定義動(dòng)畫的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

創(chuàng)新互聯(lián)建站專注于青山企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城建設(shè)。青山網(wǎng)站建設(shè)公司,為青山等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站建設(shè)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

jQuery提供了三組基本動(dòng)畫，分別是顯示與隱藏、淡入與淡出、滑入與畫出，這三組基本動(dòng)畫都是標(biāo)準(zhǔn)的、有規(guī)律的的效果，jQuery還提供了一個(gè)自定義動(dòng)畫。

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

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

1.1 show方法

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

• 參數(shù)speed，可選，動(dòng)畫的執(zhí)行時(shí)間

  • 如果不傳，就沒有動(dòng)畫效果。

  • 毫秒值(比如1000),動(dòng)畫在1000毫秒執(zhí)行完成(推薦)

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

• 參數(shù)callback，可選，執(zhí)行完動(dòng)畫后執(zhí)行的回調(diào)函數(shù)，每個(gè)元素執(zhí)行一次。

• 參數(shù)easing，可選，這里先不講，后面統(tǒng)一講

1.2 hide方法

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

1.3 原理

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

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

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

2.1 用法

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

• 參數(shù)speed，可選，動(dòng)畫的執(zhí)行時(shí)間

  • 如果不傳，默認(rèn)為normal，注意區(qū)分show/hide

  • 毫秒值(比如1000),動(dòng)畫在1000毫秒執(zhí)行完成(推薦)

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

• 參數(shù)callback，可選，執(zhí)行完動(dòng)畫后執(zhí)行的回調(diào)函數(shù)，每個(gè)元素執(zhí)行一次。

• 參數(shù)easing，可選，這里先不講，后面統(tǒng)一講

2.2 滑入畫出切換（slideToggle）

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

2.3 原理

slideDown和slideUp修改的是元素的height，通過(guò)高度變化（向下、向上增大）來(lái)動(dòng)態(tài)地顯示所有匹配的元素。

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

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

3.1 用法

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

• 參數(shù)speed，可選，動(dòng)畫的執(zhí)行時(shí)間

  • 如果不傳，默認(rèn)為normal

  • 毫秒值(比如1000),動(dòng)畫在1000毫秒執(zhí)行完成(推薦)

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

• 參數(shù)callback，可選，執(zhí)行完動(dòng)畫后執(zhí)行的回調(diào)函數(shù)，每個(gè)元素執(zhí)行一次。

• 參數(shù)easing，可選，這里先不講，后面統(tǒng)一講

3.2 淡入淡出切換（fadeToggle）

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

3.3 淡入淡出到某個(gè)值（fadeTo）

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

• 參數(shù)speed，必須

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

• 參數(shù)callback，可選，執(zhí)行完動(dòng)畫后執(zhí)行的回調(diào)函數(shù)，每個(gè)元素執(zhí)行一次。

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

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

4、三組基本動(dòng)畫總結(jié)

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

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

3. 淡入淡出到某個(gè)值：fadeTo方法。

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

5. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。這三種方法修改的這些值，都是帶數(shù)字的，因?yàn)閹Я藬?shù)字才能做漸變。

5、自定義動(dòng)畫（animate）

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

• 參數(shù)params，必須，要執(zhí)行動(dòng)畫的CSS屬性，帶數(shù)字

• 參數(shù)speed，可選，執(zhí)行動(dòng)畫時(shí)長(zhǎng)

• 參數(shù)easing，可選，這里先不講，后面統(tǒng)一講

• 參數(shù)callback，可選，執(zhí)行完動(dòng)畫后執(zhí)行的回調(diào)函數(shù)，每個(gè)元素執(zhí)行一次。

6、easing參數(shù)

現(xiàn)在來(lái)說(shuō)說(shuō)easing參數(shù)的作用，這個(gè)參數(shù)是控制動(dòng)畫的速度樣式，這個(gè)參數(shù)只有兩個(gè)取值：

• swing：擺鐘運(yùn)動(dòng)，在開頭和結(jié)尾移動(dòng)慢，在中間移動(dòng)速度快。

• linear：勻速移動(dòng)。

在不指定easing參數(shù)時(shí)，jQuery動(dòng)畫默認(rèn)值是swing。

7、動(dòng)畫隊(duì)列

在同一個(gè)元素上執(zhí)行多個(gè)動(dòng)畫，那么對(duì)于這個(gè)動(dòng)畫來(lái)說(shuō)，后面的動(dòng)畫會(huì)被放到動(dòng)畫隊(duì)列中，等前面的動(dòng)畫執(zhí)行完成了才會(huì)執(zhí)行（聯(lián)想：地鐵進(jìn)站）。

8、停止動(dòng)畫

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

8.1、stop()

stop方法接受兩個(gè)參數(shù)，這個(gè)兩個(gè)參數(shù)都是可選的，為Boolean值：

• clearQueue，是否清除動(dòng)畫隊(duì)列；

• jumpToEnd，是否跳轉(zhuǎn)到動(dòng)畫的最終效果。

當(dāng)然了，一般我們不需要傳遞參數(shù)，直接使用stop()。如果直接使用stop()方法，則會(huì)理解停止當(dāng)前正在執(zhí)行的動(dòng)畫，如果接下來(lái)還有動(dòng)畫等待進(jìn)行，則以當(dāng)前狀態(tài)開始接下來(lái)的動(dòng)畫。

8.2、判斷元素是否處于動(dòng)畫狀態(tài)

動(dòng)畫積累：在使用animate()方法的時(shí)候，要避免動(dòng)畫積累而導(dǎo)致的動(dòng)畫與用戶的行為不一致。當(dāng)用戶快速在某個(gè)元素上執(zhí)行animate動(dòng)畫時(shí)，就會(huì)出現(xiàn)動(dòng)畫積累。

解決方法是判斷元素是否處于動(dòng)畫狀態(tài)，如果元素不處于動(dòng)畫狀態(tài)，才為元素添加新的動(dòng)畫，否則不添加。

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

看完上述內(nèi)容，是不是對(duì)jQuery三組基本動(dòng)畫與自定義動(dòng)畫的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。