jQuery的4種常見動畫效果

jQuery 是一個快速、簡潔的 JavaScript 庫，其設(shè)計的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。jQuery 給我們封裝了很多動畫效果，其中最為常見的就是顯示隱藏、滑動、淡入淡出和自定義動畫。下面來看一下這些效果的使用方法。

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

（1）參數(shù)都可以省略， 無動畫直接顯示。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

hide([speed,[easing],[fn]])

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

切換語法規(guī)范，具體代碼如下：

toggle([speed,[easing],[fn]])

切換參數(shù)

（1）參數(shù)都可以省略， 無動畫直接顯示。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

 建議：平時一般不帶參數(shù)，直接顯示隱藏即可。

2.滑動效果

下滑效果語法規(guī)范，具體代碼入下：

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

下滑效果參數(shù)

（1）參數(shù)都可以省略。

（2）speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。

（3）easing:(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

上滑效果語法規(guī)范，具體代碼入下：

slideUp([speed,[easing],[fn]])

上滑效果參數(shù)

（1）參數(shù)都可以省略。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

事件切換語法格式如下：

hover([over,]out)

（1）over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于mouseenter）

（2）out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave）

（3）如果只寫一個函數(shù)，則鼠標(biāo)經(jīng)過和離開都會觸發(fā)它

3.動畫隊列及其停止排隊方法

動畫或者效果一旦觸發(fā)就會執(zhí)行，如果多次觸發(fā)，就造成多個動畫或者效果排隊執(zhí)行
停止排隊

stop()

(1）stop() 方法用于停止動畫或效果。

(2)  注意： stop() 寫到動畫或者效果的前面， 相當(dāng)于停止結(jié)束上一次的動畫。

4.淡入淡出效果
淡入效果語法，具體代碼如下：

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

淡入效果參數(shù)

（1）參數(shù)都可以省略。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

淡出效果語法規(guī)范，具體代碼如下：

fadeOut([speed,[easing],[fn]])

單小虎效果參數(shù)
（1）參數(shù)都可以省略。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

 淡入淡出切換效果語法規(guī)范

fadeToggle([speed,[easing],[fn]])

淡入淡出切換效果參數(shù)

（1）參數(shù)都可以省略。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

怎樣將漸進(jìn)方式調(diào)整到指定的不透明度呢？
可以使用以下代碼

fadeTo([[speed],opacity,[easing],[fn]])

效果參數(shù)

（1）opacity 透明度必須寫，取值 0~1 之間。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。必須寫

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

5.自定義動畫 animate
語法格式

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

自定義動畫參數(shù)

（1）params: 想要更改的樣式屬性，以對象形式傳遞，必須寫。 屬性名可以不用帶引號， 如果是復(fù)合屬性則需要采取駝峰命名法 borderLeft。其余參數(shù)都可以省略。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn:  回調(diào)函數(shù)，在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

猜你喜歡：

jQuery和vue的區(qū)別是什么?【前端面試題】

怎么給jQuery擴(kuò)展插件？【前端面試常問】

Jquery常用的選擇器有哪些？用途有什么不同？

類操作是什么意思？jQuery的類操作教程

黑馬程序員前端與移動開發(fā)培訓(xùn)