新聞中心
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用jQuery怎么實(shí)現(xiàn)基本動(dòng)畫效果,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
崇左網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),崇左網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為崇左數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的崇左做網(wǎng)站的公司定做!
animate()
方法用于創(chuàng)建自定義動(dòng)畫
語(yǔ)法:
$(selector).animate({params},speed,callback);
params:必須 定義形成動(dòng)畫的CSS屬性
speed:可選 規(guī)定效果的時(shí)常:slow,fast或毫秒
callback:可選 動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。
jQuery animate()
——操作多個(gè)屬性
默認(rèn)情況下,所有HTML元素的位置都是靜態(tài)的,并且無(wú)法移動(dòng),如需對(duì)位置進(jìn)行操作,記得首先把元素的CSS position 屬性設(shè)置為 relative、fixed或absolute。
運(yùn)行結(jié)果:
absolute是指絕對(duì)定位,即將對(duì)象從文檔流中拖出,使用left,right,top,bottom等屬性進(jìn)行絕對(duì)定位,而其層疊通過(guò)z-index屬性定義。此時(shí)對(duì)象不具有邊距,但仍有補(bǔ)白和邊框。
當(dāng)Position屬性值為absolute時(shí)對(duì)象從文檔流中抽取出來(lái),原占有的位置被后面的對(duì)象頂替上來(lái)。
Top的值表示對(duì)象上邊框與瀏覽器窗口頂部的距離,bottom的值表示對(duì)象下邊框與瀏覽器窗口底部的距離,兩者同時(shí)存在時(shí),只有Top起作用;如果兩者都未指定,則其頂端將于原文檔流位置一致,即垂直保持位置不變。
Left的值表示對(duì)象左邊框與瀏覽器窗口左邊的距離,right的值表示對(duì)象右邊框與瀏覽器窗口右邊的距離,兩者同時(shí)存在時(shí),只有Left起作用,如果兩者都未指定,則其左邊將與原文檔流位置一致,即水平保持位置不變。
ralative是指相對(duì)定位,就是依據(jù)left,right,top,bottom等屬性在正常文檔中偏移位置。
當(dāng)Position屬性值為Relative時(shí)對(duì)象原來(lái)占有的位置保留,其后面的對(duì)象按原來(lái)文檔流仍然保持原來(lái)的位置。
Top的值表示對(duì)象相對(duì)原位置向下偏移的距離,bottom的值表示對(duì)象相對(duì)原位置向上偏移的距離,兩者同時(shí)存在時(shí),只有Top起作用;
left的值表示對(duì)象相對(duì)原位置向右偏移的距離,right的值表示對(duì)象相對(duì)原位置向左偏移的距離,兩者同時(shí)存在時(shí),只有l(wèi)eft起作用。
jQuery animate()
——使用預(yù)定義的值
可以將屬性的動(dòng)畫值設(shè)置成"show"、"hide"或者"toggle"
$("button").click(function(){ $("div").animate({ height:'toggle' }); });
jQuery animate()
——使用隊(duì)列功能
jquery提供針對(duì)動(dòng)畫的隊(duì)列功能。
這意味著如果您在彼此之后編寫多個(gè)animate()
調(diào)用,jQuery會(huì)創(chuàng)建包含這些方法調(diào)用的"內(nèi)部"隊(duì)列。然后逐一運(yùn)行這些animate調(diào)用。
運(yùn)行結(jié)果:
eg:將
Tian
jquery是什么
jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù),它具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件,是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù),能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫,以便快速開發(fā)網(wǎng)站。
上述就是小編為大家分享的使用jQuery怎么實(shí)現(xiàn)基本動(dòng)畫效果了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前文章:使用jQuery怎么實(shí)現(xiàn)基本動(dòng)畫效果
標(biāo)題網(wǎng)址:http://fisionsoft.com.cn/article/joehsi.html