更新時(shí)間:2021-10-21 來源:黑馬程序員 瀏覽量:
jQuery 是一個(gè)快速、簡潔的 JavaScript 庫,其設(shè)計(jì)的宗旨是“write Less,Do
More”,即倡導(dǎo)寫更少的代碼,做更多的事情。jQuery
給我們封裝了很多動畫效果,其中最為常見的就是顯示隱藏、滑動、淡入淡出和自定義動畫。下面來看一下這些效果的使用方法。
show([speed,[easing],[fn]])
顯示參數(shù)(1)參數(shù)都可以省略, 無動畫直接顯示。
(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
隱藏語法規(guī)范,具體代碼如下:hide([speed,[easing],[fn]])
隱藏參數(shù)(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
切換語法規(guī)范,具體代碼如下:
toggle([speed,[easing],[fn]])
切換參數(shù)
(1)參數(shù)都可以省略, 無動畫直接顯示。
(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
建議:平時(shí)一般不帶參數(shù),直接顯示隱藏即可。
2.滑動效果
下滑效果語法規(guī)范,具體代碼入下:
slideDown([speed,[easing],[fn]])
下滑效果參數(shù)
(1)參數(shù)都可以省略。
(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
上滑效果語法規(guī)范,具體代碼入下:
slideUp([speed,[easing],[fn]])
上滑效果參數(shù)
(1)參數(shù)都可以省略。
(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
事件切換語法格式如下:
hover([over,]out)
(1)over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)(相當(dāng)于mouseenter)
(2)out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)(相當(dāng)于mouseleave)
(3)如果只寫一個(gè)函數(shù),則鼠標(biāo)經(jīng)過和離開都會觸發(fā)它
3.動畫隊(duì)列及其停止排隊(duì)方法
動畫或者效果一旦觸發(fā)就會執(zhí)行,如果多次觸發(fā),就造成多個(gè)動畫或者效果排隊(duì)執(zhí)行
停止排隊(duì)
stop()
(1)stop() 方法用于停止動畫或效果。
(2) 注意: stop() 寫到動畫或者效果的前面, 相當(dāng)于停止結(jié)束上一次的動畫。
4.淡入淡出效果
淡入效果語法,具體代碼如下:
fadeIn([speed,[easing],[fn]])
淡入效果參數(shù)
(1)參數(shù)都可以省略。
(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
淡出效果語法規(guī)范,具體代碼如下:
fadeOut([speed,[easing],[fn]])
單小虎效果參數(shù)
(1)參數(shù)都可以省略。
(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
淡入淡出切換效果語法規(guī)范
fadeToggle([speed,[easing],[fn]])
淡入淡出切換效果參數(shù)
(1)參數(shù)都可以省略。
(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
怎樣將漸進(jìn)方式調(diào)整到指定的不透明度呢?
可以使用以下代碼
fadeTo([[speed],opacity,[easing],[fn]])
效果參數(shù)
(1)opacity 透明度必須寫,取值 0~1 之間。
(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。必須寫
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
5.自定義動畫 animate
語法格式
animate(params,[speed],[easing],[fn])
自定義動畫參數(shù)
(1)params: 想要更改的樣式屬性,以對象形式傳遞,必須寫。 屬性名可以不用帶引號, 如果是復(fù)合屬性則需要采取駝峰命名法 borderLeft。其余參數(shù)都可以省略。
(2)speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時(shí)長的毫秒數(shù)值(如:1000)。
(3)easing:(Optional) 用來指定切換效果,默認(rèn)是“swing”,可用參數(shù)“l(fā)inear”。
(4)fn: 回調(diào)函數(shù),在動畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
猜你喜歡: