jQuery三組基本動畫與自定義動畫操作實例總結(jié)
本文實例講述了jQuery三組基本動畫與自定義動畫操作。分享給大家供大家參考,具體如下:
jQuery提供了三組基本動畫,分別是顯示與隱藏、淡入與淡出、滑入與畫出,這三組基本動畫都是標準的、有規(guī)律的的效果,jQuery還提供了一個自定義動畫。
1、顯示(show)與隱藏(hide)
顯示(show)與隱藏(hide)是一組動畫
1.1 show方法
show([speed,[easing],[callback]])
-
參數(shù)speed,可選,動畫的執(zhí)行時間
-
如果不傳,就沒有動畫效果。
-
毫秒值(比如1000),動畫在1000毫秒執(zhí)行完成(推薦)
-
固定字符串,slow(200)、normal(400)、fast(600),如果傳其他字符串,則默認為normal。
-
-
參數(shù)callback,可選,執(zhí)行完動畫后執(zhí)行的回調(diào)函數(shù),每個元素執(zhí)行一次。
-
參數(shù)easing,可選,這里先不講,后面統(tǒng)一講
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])
-
參數(shù)speed,可選,動畫的執(zhí)行時間
-
如果不傳,默認為normal,注意區(qū)分show/hide
-
毫秒值(比如1000),動畫在1000毫秒執(zhí)行完成(推薦)
-
固定字符串,slow(200)、normal(400)、fast(600),如果傳其他字符串,則默認為normal。
-
-
參數(shù)callback,可選,執(zhí)行完動畫后執(zhí)行的回調(diào)函數(shù),每個元素執(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,通過高度變化(向下、向上增大)來動態(tài)地顯示所有匹配的元素。
3、淡入(fadeIn)與淡出(fadeOut)
fadeIn/fadeOut使用方法與show/hide、slideDown/slideUp一致。
3.1 用法
fadeIn([speed],[easing],[callback])
-
參數(shù)speed,可選,動畫的執(zhí)行時間
-
如果不傳,默認為normal
-
毫秒值(比如1000),動畫在1000毫秒執(zhí)行完成(推薦)
-
固定字符串,slow(200)、normal(400)、fast(600),如果傳其他字符串,則默認為normal。
-
-
參數(shù)callback,可選,執(zhí)行完動畫后執(zhí)行的回調(diào)函數(shù),每個元素執(zhí)行一次。
-
參數(shù)easing,可選,這里先不講,后面統(tǒng)一講
3.2 淡入淡出切換(fadeToggle)
fadeToggle([speed,[easing],[callback]])
如果當前元素處于隱藏狀態(tài),那么執(zhí)行fadeIn操作,如果處于顯示狀態(tài),那么執(zhí)行fadeOut操作。
3.3 淡入淡出到某個值(fadeTo)
fadeTo(speed,opacity,[easing],[callback]])
把所有匹配元素的不透明度以漸進方式調(diào)整到指定的不透明度
-
參數(shù)speed,必須
-
參數(shù)opacity,0-1之間的數(shù)值(比如0.4),表示淡到某一個值。
-
參數(shù)callback,可選,執(zhí)行完動畫后執(zhí)行的回調(diào)函數(shù),每個元素執(zhí)行一次。
與淡入淡出的區(qū)別:淡入淡出只能控制元素的不透明度從 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具體值。并且時間參數(shù)是必需的!
fade系列方法:修改的是元素的opacity。
4、三組基本動畫總結(jié)
-
Query給我們提供了三組動畫,show/hide、slideUp/slideDown、fadeIn/fadeOut。
-
動畫切換方法:slideToggle、fadeToggle,注意:show和hide沒有切換的方法。
-
淡入淡出到某個值:fadeTo方法。
-
show/slideDown/fadeIn三個是顯示效果、hide/slideUp/fadeOut三個是隱藏效果。
-
show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。這三種方法修改的這些值,都是帶數(shù)字的,因為帶了數(shù)字才能做漸變。
5、自定義動畫(animate)
animate(params,[speed],[easing],[callback])
-
參數(shù)params,必須,要執(zhí)行動畫的CSS屬性,帶數(shù)字
-
參數(shù)speed,可選,執(zhí)行動畫時長
-
參數(shù)easing,可選,這里先不講,后面統(tǒng)一講
-
參數(shù)callback,可選,執(zhí)行完動畫后執(zhí)行的回調(diào)函數(shù),每個元素執(zhí)行一次。
6、easing參數(shù)
現(xiàn)在來說說easing參數(shù)的作用,這個參數(shù)是控制動畫的速度樣式,這個參數(shù)只有兩個取值:
-
swing:擺鐘運動,在開頭和結(jié)尾移動慢,在中間移動速度快。
-
linear:勻速移動。
在不指定easing參數(shù)時,jQuery動畫默認值是swing。
7、動畫隊列
在同一個元素上執(zhí)行多個動畫,那么對于這個動畫來說,后面的動畫會被放到動畫隊列中,等前面的動畫執(zhí)行完成了才會執(zhí)行(聯(lián)想:地鐵進站)。
8、停止動畫
要停止動畫,可以使用stop()方法。stop(clearQueue, jumpToEnd)。
8.1、stop()
stop方法接受兩個參數(shù),這個兩個參數(shù)都是可選的,為Boolean值:
-
clearQueue,是否清除動畫隊列;
-
jumpToEnd,是否跳轉(zhuǎn)到動畫的最終效果。
當然了,一般我們不需要傳遞參數(shù),直接使用stop()。如果直接使用stop()方法,則會理解停止當前正在執(zhí)行的動畫,如果接下來還有動畫等待進行,則以當前狀態(tài)開始接下來的動畫。
8.2、判斷元素是否處于動畫狀態(tài)
動畫積累:在使用animate()方法的時候,要避免動畫積累而導致的動畫與用戶的行為不一致。當用戶快速在某個元素上執(zhí)行animate動畫時,就會出現(xiàn)動畫積累。
解決方法是判斷元素是否處于動畫狀態(tài),如果元素不處于動畫狀態(tài),才為元素添加新的動畫,否則不添加。
if( ! $(element).is(":animate") ){ //判斷元素是否正處于動畫狀態(tài) //如果當前沒有進行動畫,則添加新的動畫 }
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題:《jQuery動畫與特效用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
- 用js實現(xiàn)的模擬jquery的animate自定義動畫(2.5K)
- 深入理解jquery自定義動畫animate()
- jQuery中使用animate自定義動畫的方法
- Jquery 自定義動畫概述及示例
- jQuery自定義動畫函數(shù)實例詳解(附demo源碼)
- jQuery使用動畫隊列自定義動畫操作示例
- jQuery動畫animate方法使用介紹
- jquery animate 動畫效果使用說明
- JQuery動畫animate的stop方法使用詳解
- jQuery實現(xiàn)圖像旋轉(zhuǎn)動畫效果
- 分享8款優(yōu)秀的 jQuery 加載動畫和進度條插件
- Jquery中使用show()與hide()方法動畫顯示和隱藏圖片
相關(guān)文章
jQuery實現(xiàn)文字超過1行、2行或規(guī)定的行數(shù)時自動加省略號的方法
這篇文章主要介紹了jQuery實現(xiàn)文字超過1行、2行或規(guī)定的行數(shù)時自動加省略號的方法,涉及jQuery針對頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-03-03jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法
這篇文章主要介紹了jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法,涉及jQuery操作鼠標事件及dom元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03- 本文給大家分享一款jquery實現(xiàn)的完美拖拽(拖動div層效果),如果你正在找這類效果不妨進入?yún)⒖家幌隆?/div> 2015-06-06
關(guān)于setInterval、setTimeout在jQuery中的使用注意事項
最近碰到個問題,在使用jquery寫定時器時,總是會出現(xiàn)fn不存在的錯誤提示2011-09-09jquery分頁插件jquery.pagination.js實現(xiàn)無刷新分頁
這篇文章主要介紹了jquery分頁插件jquery.pagination.js實現(xiàn)無刷新分頁的相關(guān)資料,需要的朋友可以參考下2016-04-04最新評論