JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第11章

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第11章jQuery特效

本章主要內(nèi)容：簡(jiǎn)單特效透明度特效滑動(dòng)特效自定義動(dòng)畫動(dòng)畫相關(guān)的屬性和方法11.1.1隱藏元素hide()方法用于隱藏元素，并可根據(jù)參數(shù)實(shí)現(xiàn)不同的動(dòng)畫效果。1．直接隱藏?zé)o參數(shù)的hide()方法可直接隱藏元素，沒有動(dòng)畫效果。2．控制隱藏的快慢可用字符串“slow”“normal”和“fast”控制動(dòng)畫完成的快慢，這適用于所有特效方法。為hide()方法提供參數(shù)后，會(huì)以動(dòng)畫的方式完成隱藏。3．設(shè)置完成動(dòng)作的時(shí)間jQuery默認(rèn)動(dòng)作完成時(shí)間為400ms，“fast”為200ms，“normal”為默認(rèn)的400ms，“slow”為600ms。4．指定完成函數(shù)可以為hide()方法指定一個(gè)函數(shù)，該函數(shù)在動(dòng)作完成時(shí)執(zhí)行，基本格式如下。.

hide(param1,func)參數(shù)param1是表示動(dòng)畫快慢的字符串或完成時(shí)間。參數(shù)func為函數(shù)名或者匿名函數(shù)。特別說明：幾乎所有的jQuery特效方法，均可指定完成函數(shù)。11.1.2顯示元素show()方法與hide()方法的作用剛好相反，用于將隱藏的元素顯示出來。在不指定參數(shù)時(shí)，show()方法直接顯示元素。還可指定完成顯示元素的動(dòng)作快慢、完成時(shí)間及完成時(shí)回調(diào)函數(shù)。11.1.3隱藏/顯示切換toggle()方法兼具h(yuǎn)ide()和show()方法的功能，用法類似，可隱藏已顯示的元素，或者顯示已隱藏的元素。11.2.1淡入效果fadeIn()方法可實(shí)現(xiàn)淡入效果，將元素的透明度從100減到0，即從不可見變?yōu)榭梢姟?1.2.2淡出效果fadeOut()方法可實(shí)現(xiàn)淡出效果，將可見元素的透明度從0增加到100，即從可見變?yōu)椴豢梢姟?1.2.3調(diào)整透明度fadeTo()方法調(diào)整元素的透明度，參數(shù)取值范圍為[0,1]11.2.4淡入淡出切換fadeToggle()方法用于實(shí)現(xiàn)淡入淡出切換，即對(duì)可見元素施加淡出效果（fadeOut()），對(duì)不可見元素施加淡入效果（fadeIn()）。11.3.1滑入效果slideDown()方法將元素的高度從0增加到實(shí)際高度。11.3.2滑出效果slideUp()方法將可見元素的高度從實(shí)際高度減少到0。11.3.3滑入滑出切換效果slideToggle()方法對(duì)可見元素施加滑出效果，對(duì)不可見元素施加滑入效果。10.4自定義動(dòng)畫animate()方法可實(shí)現(xiàn)自定義動(dòng)畫，其基本語法格式如下。.animate(

property

[,

duration

]

[,

complete

]

)其中：property為以對(duì)象格式表示的CSS屬性，如{width:"200",left:"100px"}。duration為動(dòng)畫完成時(shí)間（單位為毫秒），或者是表示快慢的字符串（“slow”“normal”或“fast”），complete為動(dòng)畫完成時(shí)調(diào)用的函數(shù)。animate()方法只支持屬性值為數(shù)字的CSS屬性，如width、height、left、opacity等。11.4.1字面量動(dòng)畫在animate()方法中使用字面量設(shè)置CSS屬性時(shí)，jQuery將會(huì)把現(xiàn)有的屬性值通過動(dòng)畫效果調(diào)整為新的值。11.4.2相對(duì)量動(dòng)畫相對(duì)量動(dòng)畫指使用相對(duì)量來設(shè)置CSS屬性。例如，{width:'+=200'}表示元素寬度在原來的基礎(chǔ)上增加200，{width:'-=200'}則表示元素寬度在原來的基礎(chǔ)上減少20011.4.3自定義顯示或隱藏在使用animate()方法定義動(dòng)畫時(shí)，CSS屬性可使用“show”“hide”或“toggle”字符串來實(shí)現(xiàn)元素的顯示或隱藏，類似于show()、hide()或toggle()方法。例如，{width:'toggle'}表示在元素可見時(shí)，將其寬度逐漸減為0；元素不可見時(shí)，增加其寬度直到為實(shí)際寬度。11.4.4位置動(dòng)畫在animate()方法中改變?cè)氐膌eft或top屬性，可實(shí)現(xiàn)位置動(dòng)畫。實(shí)現(xiàn)元素位置動(dòng)畫時(shí)，需要將CSSposition屬性設(shè)置為absolute、relative或fixed。position屬性值為static（默認(rèn)值）時(shí)，無法實(shí)現(xiàn)元素的移動(dòng)。11.5.1動(dòng)畫延時(shí)delay()方法用于實(shí)現(xiàn)延時(shí)操作，參數(shù)為時(shí)間（單位為毫秒）。11.5.2停止動(dòng)畫stop()方法用于停止正在執(zhí)行的動(dòng)畫，目標(biāo)對(duì)象的CSS屬性為動(dòng)畫停止時(shí)的狀態(tài)。11.5.3結(jié)束動(dòng)畫finish()方法結(jié)束正在執(zhí)行的動(dòng)畫，目標(biāo)對(duì)象的CSS屬性設(shè)置為動(dòng)畫正常結(jié)束時(shí)的狀態(tài)，即跳過還未完成的動(dòng)畫過程，直接顯示結(jié)束狀態(tài)。11.5.4禁止動(dòng)畫效果jQuery.fx.off屬性設(shè)置為true時(shí)，可禁止頁(yè)面中所有的動(dòng)畫效果，直接將目標(biāo)對(duì)象