建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要講解了jQuery三組基本動畫與自定義動畫的方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
jQuery提供了三組基本動畫，分別是顯示與隱藏、淡入與淡出、滑入與畫出，這三組基本動畫都是標(biāo)準(zhǔn)的、有規(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)，如果傳其他字符串，則默認(rèn)為normal。
參數(shù)callback，可選，執(zhí)行完動畫后執(zhí)行的回調(diào)函數(shù)，每個元素執(zhí)行一次。
參數(shù)easing，可選，這里先不講，后面統(tǒng)一講
與show方法的用法完全一致。
1.3 原理show和hide修改的是元素的width、height、opacity。
2、滑入（sliderDown）與隱藏（sliderUp）滑入(slideUp)與滑出(slideDown)是一組動畫，效果與卷簾門類似
slideUp/slideDown,使用方法與show/hide基本一致。
slideDown([speed],[easing],[callback])
參數(shù)speed，可選，動畫的執(zhí)行時間
如果不傳，默認(rèn)為normal，注意區(qū)分show/hide
毫秒值(比如1000),動畫在1000毫秒執(zhí)行完成(推薦)
固定字符串，slow(200)、normal(400)、fast(600)，如果傳其他字符串，則默認(rèn)為normal。
參數(shù)callback，可選，執(zhí)行完動畫后執(zhí)行的回調(diào)函數(shù)，每個元素執(zhí)行一次。
參數(shù)easing，可選，這里先不講，后面統(tǒng)一講
$(selector).slideToggle(speed,callback);
如果是隱藏狀態(tài)，那么執(zhí)行slideDown操作，如果是顯示狀態(tài)，那么執(zhí)行slideUp操作。
slideDown和slideUp修改的是元素的height，通過高度變化（向下、向上增大）來動態(tài)地顯示所有匹配的元素。
3、淡入（fadeIn）與淡出（fadeOut）fadeIn/fadeOut使用方法與show/hide、slideDown/slideUp一致。
3.1 用法fadeIn([speed],[easing],[callback])
參數(shù)speed，可選，動畫的執(zhí)行時間
如果不傳，默認(rèn)為normal
毫秒值(比如1000),動畫在1000毫秒執(zhí)行完成(推薦)
固定字符串，slow(200)、normal(400)、fast(600)，如果傳其他字符串，則默認(rèn)為normal。
參數(shù)callback，可選，執(zhí)行完動畫后執(zhí)行的回調(diào)函數(shù)，每個元素執(zhí)行一次。
參數(shù)easing，可選，這里先不講，后面統(tǒng)一講
fadeToggle([speed,[easing],[callback]])
如果當(dāng)前元素處于隱藏狀態(tài)，那么執(zhí)行fadeIn操作，如果處于顯示狀態(tài)，那么執(zhí)行fadeOut操作。
fadeTo(speed,opacity,[easing],[callback]])
把所有匹配元素的不透明度以漸進(jìn)方式調(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ù)字的，因?yàn)閹Я藬?shù)字才能做漸變。
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í)行一次。
現(xiàn)在來說說easing參數(shù)的作用，這個參數(shù)是控制動畫的速度樣式，這個參數(shù)只有兩個取值：
swing：擺鐘運(yùn)動，在開頭和結(jié)尾移動慢，在中間移動速度快。
linear：勻速移動。
在不指定easing參數(shù)時，jQuery動畫默認(rèn)值是swing。
7、動畫隊(duì)列在同一個元素上執(zhí)行多個動畫，那么對于這個動畫來說，后面的動畫會被放到動畫隊(duì)列中，等前面的動畫執(zhí)行完成了才會執(zhí)行（聯(lián)想：地鐵進(jìn)站）。
8、停止動畫要停止動畫，可以使用stop()方法。stop(clearQueue, jumpToEnd)。
8.1、stop()stop方法接受兩個參數(shù)，這個兩個參數(shù)都是可選的，為Boolean值：
clearQueue，是否清除動畫隊(duì)列；
jumpToEnd，是否跳轉(zhuǎn)到動畫的最終效果。
當(dāng)然了，一般我們不需要傳遞參數(shù)，直接使用stop()。如果直接使用stop()方法，則會理解停止當(dāng)前正在執(zhí)行的動畫，如果接下來還有動畫等待進(jìn)行，則以當(dāng)前狀態(tài)開始接下來的動畫。
8.2、判斷元素是否處于動畫狀態(tài)動畫積累：在使用animate()方法的時候，要避免動畫積累而導(dǎo)致的動畫與用戶的行為不一致。當(dāng)用戶快速在某個元素上執(zhí)行animate動畫時，就會出現(xiàn)動畫積累。
解決方法是判斷元素是否處于動畫狀態(tài)，如果元素不處于動畫狀態(tài)，才為元素添加新的動畫，否則不添加。
if( ! $(element).is(":animate") ){ //判斷元素是否正處于動畫狀態(tài)
//如果當(dāng)前沒有進(jìn)行動畫，則添加新的動畫
} 網(wǎng)站標(biāo)題：jQuery三組基本動畫與自定義動畫的方法-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://fisionsoft.com.cn/article/igpoj.html
