月與沉淀0916jq對象動畫jquery處理

Jquery對象動畫處理前端講師：張焱CONTENT隱藏與顯示動畫效果淡入與淡出動畫效果滑入滑出動畫效果

自定義動畫效果動畫隊列動畫回調(diào)函數(shù)010203040506顯示與隱藏動畫效果01JavaScript01顯示與隱藏動畫效果hide(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法:動態(tài)改變當(dāng)前匹配元素的高度、寬度和不透明度，最終隱藏當(dāng)前元素，此時元素的屬性display修改為none。語法:hide(動畫運行的時間);slow是0.6秒、normal是0.4秒和fast是0.2秒，建議使用毫秒例1:

$(“p”).hide(“slow”);//p元素0.6秒內(nèi)隱藏$(“p”).hide(600);//同上例2:

$(“p”).hide();//?即隱藏例3:

$(“p”).hide(5000,”swing”,function(){語句體;});show(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法:動態(tài)改變當(dāng)前匹配元素的高度、寬度和不透明度，最終顯示當(dāng)前元素，此時元素的屬性display恢復(fù)為none以外的值。語法:show(動畫運行的時間);slow是0.6秒、normal是0.4秒和fast是0.2秒例1:$(“p”).show(“slow”);//p元素0.6秒內(nèi)顯示$(“p”).show(600);//同上例2:$(“p”).show();//立即顯示例3:

$(“p”).show(5000,”swing”,function(){語句體;});JavaScript011.顯示與隱藏動畫效果1.fadeOut(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法:動態(tài)的改變當(dāng)前元素的不透明度（其他的不變），最終隱藏當(dāng)前元素。此時元素的css屬性修改為none。它的語法結(jié)構(gòu)同hide()和show相同。例如:$(“p”).fadeOut(“slow”);//p元素0.6秒內(nèi)淡出$(“p”).fadeOut(600);//同上例如:$(“p”).fadeOut();//立即淡出2.fadeIn(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法:動態(tài)的改變當(dāng)前元素的不透明度（其他的不便），最終顯示當(dāng)前元素。此時元素的css屬性修改為none以外的值。

例如:$(“p”).fadeIn(“slow”);//p元素0.6秒內(nèi)淡入$(“p”).fadeIn(600);//同上例如:$(“p”).fadeIn();//立即淡入淡入與淡出動畫效果02JavaScript022.淡入與淡出動畫效果1.fadeOut(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法:動態(tài)的改變當(dāng)前元素的不透明度（其他的不變），最終隱藏當(dāng)前元素。此時元素的css屬性修改為none。它的語法結(jié)構(gòu)同hide()和show相同。例如:$(“p”).fadeOut(“slow”);//p元素0.6秒內(nèi)淡出$(“p”).fadeOut(600);//同上例如:$(“p”).fadeOut();//立即淡出2.fadeIn(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法:動態(tài)的改變當(dāng)前元素的不透明度（其他的不便），最終顯示當(dāng)前元素。此時元素的css屬性修改為none以外的值。

例如:$(“p”).fadeIn(“slow”);//p元素0.6秒內(nèi)淡入$(“p”).fadeIn(600);//同上例如:$(“p”).fadeIn();//立即淡入JavaScript022.淡入與淡出動畫效果3.fadeToggle(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法：會動態(tài)的改變當(dāng)前元素不透明度（其他不變），最終切換當(dāng)前元素的可見狀態(tài)。也就是說，如果元素是可見的，則通過淡出效果切換成隱藏狀態(tài)；如果元素是隱藏的，則通過淡入此效果切換為可見狀態(tài)。例如:$(“p”).fadeToggle(“slow”);//p元素0.6秒內(nèi)切換$(“p”).fadeToggle(600);//同上例如:$(“p”).fadeToggle();//0.4秒切換，因為默認(rèn)值是normal4.fadeTo();方法:會把當(dāng)前元素動態(tài)的調(diào)整到指定不透明度（其他不變）。語法:fadeTo(動畫的時間，不透明度);不透明度取0-1之間的值，0表示透明，1表示不透明。例如:$(“p”).fadeTo(“slow”,0.5);//p元素在0.6秒內(nèi)透明度變成0.5$(“p”).fadeTo(600,0.5);//同上滑入與滑出效果03JavaScri

tp033.

滑入與滑出效果slideUp(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法:動態(tài)的改變當(dāng)前元素的高度（其他的不變），最終隱藏當(dāng)前元素。此時元素的css屬性修改為none。它的語法結(jié)構(gòu)同hide()和show相同。例如:$(“p”).slideUp(“slow”);//p元素0.6秒內(nèi)發(fā)生滑出$(“p”).slideUp(600);//同上例如:$(“p”).slideUp();//0.4秒內(nèi)發(fā)生滑出，因為默認(rèn)值是normalslideDown(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法:動態(tài)的改變當(dāng)前元素的高度（其他的不變），最終顯示當(dāng)前元素。此時元素的css屬性修改為block。它的語法結(jié)構(gòu)同hide()和show相同。例如:$(“p”).slideDown(“slow”);//p元素0.6秒內(nèi)發(fā)生滑入$(“p”).slideDown(600);//同上例如:$(“p”).slideDown();//0.4秒內(nèi)發(fā)生滑入，因為默認(rèn)值是normalJavaScri

tp033.

滑入與滑出效果3.slideToggle(動畫持續(xù)時間[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]);方法：會動態(tài)的改變當(dāng)前元素高度(其他不變），最終切換當(dāng)前元素的可見狀態(tài)。也就是說，如果元素是可見的，則通過滑出效果切換成隱藏狀態(tài)；如果元素是隱藏的，則通過滑入此效果切換為可見狀態(tài)。例如:$(“p”).slideToggle(“slow”);//p元素0.6秒內(nèi)切換$(“p”).slideToggle(600);//同上例如:$(“p”).slideToggle();//0.4秒切換，因為默認(rèn)值是

normal自定義動畫效果04JavaScri

tp044.

自定義動畫效果自定義動畫概述：光靠前面講過的動畫方法，遠遠無法滿足開發(fā)者的各種需求，比如改變元素的位置、縮放元素的大小等。1.

an大im家ate的()期;方望法:可以動態(tài)改變當(dāng)前元素的各種CSS屬性。語法:animate({需要改變的屬性:值},動畫持續(xù)時,[,easing用來指定切換效果,動畫執(zhí)行完畢調(diào)用的函數(shù)]););說明:animate()方法只能夠改變可以取數(shù)字值的CSS屬性，例如:width、height、border-width、padding來到這等里等，。相信大家都有一個明例如:$(“p”).animate({“width”:”200px”},”normal”);//p元素的寬度在0.4秒內(nèi)變化到200px;確的目例標(biāo)如，::或$(者“是p”希)望.a有ni一m技ate傍({“width”:”200px”},400);//同上身，或例者如是::希$(望“提p”升)自.a己ni，m又ate或({“width”:”200px”});//同上者是希帶望指能定在動畢畫業(yè)效之果后形通過式自己的努力例找如到:$一(“份p合”心).意an的im工a作te；({“width”:”hide”});//0.4秒內(nèi)改變p元素的寬度，使用隱藏效果例如:$(“p”).animate({“width”:”hide”});//0.4秒內(nèi)改變p元素的寬度，使用隱藏效果例如:$(“p”).animate({“width”:”toggle”});//0.4秒內(nèi)改變p元素的寬度，使用切換隱藏顯示效果JavaScri

tp044.自定義動畫效果對于由多個單詞組成的CSS屬性名。有兩種表示方法。$(大“家p”的).期an望imate({“border-width”:”15px”});

$(“p”).animate({“borderWidth”:”15px”});來到動這態(tài)里改，變相元信素大的家C都S有S一屬個性明left、top、bottom、right，可以使元素運動到不同的位置。不過必須確的確目保標(biāo)元，素或的者C是S希S屬望性有一po技si傍tion已經(jīng)被設(shè)置為relative、absolute或者fixed。身，或$者(“是p希”望)提.cs升s(自“己p，os又it或ion”,”relative”)者是希$望(“能p在”畢)業(yè).an之im后通at過e(自{“己left”:”300px”});//p元素在0.4秒內(nèi)向右移動，使得CSS屬性的left值為300px。的努增力量找到一份合心意的工作；$(“p”).css(“position”,”relative”)$(“p”).animate({“l(fā)eft”:”+=300px”});//p元素在0.4秒內(nèi)向右移動，使得CSS屬性的

left值在原來的基礎(chǔ)上增加300px。多重動畫$(p).animate({“l(fā)eft”:”300px”,”height”:”100px’});//p元素在0.4秒內(nèi)向右移動使得

CSS屬性left值為300px，而在移動的同時，放大元素的高度為100pxJavaScri

tp044.自定義動畫效果可以使用animate()方法，來代替其他所有的動畫方法。例大家的期望如:$(“p”).animate({“height”:”hide”,”width”:”hide”,”opacity”:”來到這里h，i相de信”大}家,4都00有)一;個明確的目標(biāo)，或者$(是“希p望”有).一hi技d傍e();身，或者是希望提升自己，又或者是希望能在畢業(yè)之后通過自己的努力找到一份合心意的工作；動畫隊列0505JavaScript5.動畫隊列可以使用animate()方法，來代替其他所有的動畫方法。例如:$(“p”).animate({“height”:”hide”,”width”:”hide”,”opacity”:”hide”},400);上面例子里面的多個動畫是同時發(fā)生的。如果想要按照順序執(zhí)行每個動畫效果，例如:讓p元素先向右滑動，然后再放大它的高度，只需要使用多次animate()方法，每個animate()方法執(zhí)行一個動畫效果就可以了。例1:$(“p”).animate({“l(fā)eft”:”300px”});//p元素在0.4秒內(nèi)向右使得CSS屬性left值為

300px。$(“p”).animate({“height”:”100px”});//然后p元素在0.4秒內(nèi)放大高度為100px。總之，在CSS屬性left改變之前，CSS屬性height將不會被改變。像這樣，動畫效果執(zhí)行具有先后順序，稱之為動畫序列。05JavaScript5.2延遲動畫隊列延遲動畫隊列概述:如果需要延遲執(zhí)行當(dāng)前元素的某個動畫效果。可以使用delay()方法。語法:delay(動畫時間);動畫時間可以使slow、normal、fast。也可以是毫秒。例1:$(“p”).delay(1000).animate({“l(fā)eft”:”300px”}).animate({“height”:”100px”});//延遲1秒后，p元素在0.4秒內(nèi)向右使得CSS屬性left值為300px。然后p元素在0.4秒內(nèi)放大高度為

100px。例2:$(“p”).animate({“l(fā)eft”:”300px”}).delay(1000).animate({“height”:”100px”});//p元素在0.4秒內(nèi)向右使得CSS屬性left值為300px。延遲1秒后，然后p元素在0.4秒內(nèi)放大高度為

100px。05JavaScript5.3中止動畫隊列終止動畫隊列概述:如果需要在某時刻停止當(dāng)前元素正在進行的動畫效果，可以使用stop();效果。語法:stop(是否要清空未執(zhí)行完的動畫隊列，是否直接將正在執(zhí)行的動畫跳轉(zhuǎn)到末狀態(tài));兩個參數(shù)的默認(rèn)值均是false;例如:原始動畫:$(“p”).animate({“l(fā)eft”:”+=400px”},2000).animate({“top”:”+=200px”},2000).animate({“l(fā)eft”:”-=400px”},2000).animate({“top”:”-=200px”},2000);例如1:在p元素從狀態(tài)1右移變到狀態(tài)2的過程中，單擊ID為btn1的元素，使用stop()方法終止動畫1.從終止位置開始，p元素會繼續(xù)執(zhí)行動畫2、動畫3、動畫4，最總會到狀態(tài)1的左邊。$(“btn1”).click(funciton(){$(“p”).stop();})05JavaScript5.3中止動畫隊列（續(xù)）例2:在p元素從狀態(tài)1水平右移變到狀態(tài)2的過程中，單擊btn2，使用stop(true);方法終止動畫1。p元素會始終停留在終止位置，后續(xù)動畫2、動畫3、動畫4執(zhí)行隊列被清空，都不會被執(zhí)行$(“btn2”).click(funciton(){$(“p”).stop(true);})例3:在p元素從狀態(tài)1水平右移變到狀態(tài)2的過程中，單擊btn2，使用stop(false,true);方法終止動畫1。并且，立即從終止位置跳轉(zhuǎn)到狀態(tài)2,并繼續(xù)執(zhí)行動畫2、動畫3、動畫4，最終回到動畫1$(“btn3”).click(funciton(){$(“p”).stop(false,true);})例4:在p元素從狀態(tài)1水平右移變到狀態(tài)2的過程中，單擊btn2，使用stop(true);方法終止動畫1。p元素會始終停留在終止位置，后續(xù)動畫2、動畫3、動畫4執(zhí)行隊列被清空，都不會被執(zhí)行$(“btn4”).click(funciton(){$(“p”).stop(true,true);})05JavaScript5.4循環(huán)隊列如果希望循環(huán)執(zhí)行一系列動畫，可以建立一個包含動畫隊列的函數(shù)，然后再最后一個動畫方法里面回調(diào)這個函數(shù)。例如:function

loop(){$(“p”).animate({“l(fā)eft”:”+=400px”},2000).animate({“top”:”+=200px”},2000).animate({“l(fā)eft”:”-=400px”},2000).animate({“top”:”-=200px”},2000,function(){loop();});}$(“btn”).click(function(){loop();})動畫回調(diào)函數(shù)06JavaScri

tp066.動畫回調(diào)函數(shù)動畫回調(diào)函數(shù)概述:假設(shè)在元素動畫結(jié)束后，設(shè)置它的CSS屬性。如果這是按照常規(guī)思路，在動畫方法后使用CSS()方法，并不能得到預(yù)期效果。實際情況是，動畫開始之前，CSS()方法就被執(zhí)行了。例如:$(“大p家”的).a期nim望ate({“width”:”300px”},1000).css(“border-width”,0);出現(xiàn)這個問題的原因是C