首頁技術文章正文

jQuery的4種常見動畫效果

更新時間:2021-10-21 來源:黑馬程序員 瀏覽量:

IT培訓班


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

動畫效果.png

1.顯示隱藏效果

1634797364167_1顯示隱藏效果 Wrter的子類.png

show([speed,[easing],[fn]])
 顯示參數(shù)

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

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

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

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

隱藏語法規(guī)范,具體代碼如下:
hide([speed,[easing],[fn]])
隱藏參數(shù)
(1)參數(shù)都可以省略, 無動畫直接顯示。

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

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

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

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

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

切換參數(shù)

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

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

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

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

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


2.滑動效果

1634796632002_簡潔版下拉滑動菜單.png

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

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

下滑效果參數(shù)

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

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

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

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

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

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

上滑效果參數(shù)

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

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

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

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

事件切換語法格式如下:

hover([over,]out)

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

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

(3)如果只寫一個函數(shù),則鼠標經過和離開都會觸發(fā)它


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

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

stop()

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

(2)  注意: stop() 寫到動畫或者效果的前面, 相當于停止結束上一次的動畫。


4.淡入淡出效果
淡入效果語法,具體代碼如下:

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

淡入效果參數(shù)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

怎樣將漸進方式調整到指定的不透明度呢?
可以使用以下代碼

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

效果參數(shù)

(1)opacity 透明度必須寫,取值 0~1 之間。

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

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

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


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

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

自定義動畫參數(shù)

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

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

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

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





猜你喜歡:

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

怎么給jQuery擴展插件?【前端面試常問】

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

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!