2018-5-18 seo達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
jQuery提供了JS未能提供的動(dòng)畫(huà)效果,利用jQuery的動(dòng)畫(huà)效果,可以極大的簡(jiǎn)化JS動(dòng)畫(huà)部分的邏輯
滑入動(dòng)畫(huà)
定義:以下拉方式動(dòng)畫(huà)效果將html內(nèi)容顯示出來(lái)
使用方式:
$(selector).slideDown(time,function)
time代表執(zhí)行動(dòng)畫(huà)的時(shí)間,function代表動(dòng)畫(huà)執(zhí)行完之后所要執(zhí)行的函數(shù)
滑出動(dòng)畫(huà)
定義:以上滑方式動(dòng)畫(huà)效果將html內(nèi)容隱藏出來(lái)
使用方式:
$(selector).slideUp(time,function)
time代表執(zhí)行動(dòng)畫(huà)的時(shí)間,function代表動(dòng)畫(huà)執(zhí)行完之后所要執(zhí)行的函數(shù)
滑入滑出切換動(dòng)畫(huà)
定義:在滑入滑出動(dòng)畫(huà)間切換
使用方式:
$(selector).slideToggle(time,function)
淡入動(dòng)畫(huà)
作用:讓元素以淡淡的進(jìn)入視線的方式展現(xiàn)出來(lái)
使用方式
$(selector).fadeIn(time,function)
淡出動(dòng)畫(huà)
作用:讓元素以淡淡的離開(kāi)視線的方式隱藏起來(lái)
使用方式
$(selector).fadeOut(time,function)
淡入淡出切換動(dòng)畫(huà)
作用:讓元素在淡入淡出動(dòng)畫(huà)切換
使用方式
$(Selector).fadeToggle(time,function)
修改opacity
作用: 修改opacity的值
使用方式
$(Selector).fadeTo(time,opacity,function)
顯示動(dòng)畫(huà)
作用: 將Html結(jié)構(gòu)顯現(xiàn)出來(lái)
使用方式
$(Selector).show(time,function)
隱藏動(dòng)畫(huà)
作用: 將Html結(jié)構(gòu)隱藏起來(lái)
使用方式
$(Selector).hide(time,function)
定義:停止正在執(zhí)行的動(dòng)畫(huà)
使用方式:
$(selector).stop()
作用:執(zhí)行一組CSS屬性的自定義動(dòng)畫(huà)
使用方式:
$(selector).animate({CSS定義},time,function())
背景
滑入滑出動(dòng)畫(huà)
$(selector).slideDown(2000)
$(selector).slideDown()
$(selector).slideDown(fast/normal/slow)
$(selector).slideUp(2000)
$(selector).slideUp()
$(selector).slideUp(fast/normal/slow)
$(selector).slideToggle(2000)
$(selector).slideToggle()
$(selector).slideToggle(fast/normal/slow)
淡入淡出動(dòng)畫(huà)
$(selector).fadeIn(2000)
$(selector).fadeIn()
$(selector).fadeIn(fast/normal/slow)
$(selector).fadeOut(2000)
$(selector).fadeOut()
$(selector).fadeOut(fast/normal/slow)
$(selector).fadeToggle(2000)
$(selector).fadeToggle()
$(selector).fadeToggle(fast/normal/slow)
time可以是字符串,可以是具體數(shù)字
也可只有參數(shù)一、參數(shù)二
顯示隱藏動(dòng)畫(huà)
$(selector).show(2000)
$(selector).show()
$(selector).show(fast/normal/slow)
$(selector).hide(2000)
$(selector).hide()
$(selector).hide(fast/normal/slow)
停止動(dòng)畫(huà)
stop()中可以有兩個(gè)參數(shù),參數(shù)一:后續(xù)動(dòng)畫(huà)是否執(zhí)行,參數(shù)二:當(dāng)前動(dòng)畫(huà)是否執(zhí)行完畢,默認(rèn)的是(false,false),注意第一個(gè)參數(shù),true代表的是后續(xù)動(dòng)畫(huà)不執(zhí)行
————————————————————————————
第一種:(false,false)
后續(xù)動(dòng)畫(huà)會(huì)執(zhí)行,當(dāng)前動(dòng)畫(huà)不會(huì)執(zhí)行完
第二種:(false,true)
后續(xù)動(dòng)畫(huà)會(huì)執(zhí)行,當(dāng)前動(dòng)畫(huà)會(huì)執(zhí)行完
第三種:(true,false)
后續(xù)動(dòng)畫(huà)不會(huì)執(zhí)行,當(dāng)前動(dòng)畫(huà)不會(huì)執(zhí)行完
第四種:(true,true)
后續(xù)動(dòng)畫(huà)不會(huì)執(zhí)行,當(dāng)前動(dòng)畫(huà)會(huì)執(zhí)行完
自定義動(dòng)畫(huà)
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com