基本效果

匹配元素從左上角開始變濃變大或縮小到左上角變淡變小

①隱藏元素

除了可以設定匹配元素的display:none外,可以用以下函式

hide(speed,[callback])  返回值:jQuery  引數-speed:三種預訂速度之一的字串String(slow,normal,fast)或表示動畫時長的毫秒數Number  callback:在完成動畫時執行的函式,每個匹配元素執行一次

slow=600毫秒  normal=400毫秒  fast=200毫秒

以優雅的動畫隱藏所有匹配的元素,並在隱藏完成後可選的觸發一個回撥函式。

②顯示元素

show(speed,[callback])    以優雅的動畫顯示所有匹配的元素,並在顯示完成後可選的觸發一個回撥函式。 

③交替顯示隱藏

toggle(speed,[callback])  以優雅的動畫切換匹配元素的可見狀態,原來可見切換為不可見,原來不可見切換為可見。

$(function(){

$("#hide1").click(function(){$("#1").hide(700)});

$("#show1").click(function(){$("#1").show(700)});

$("#toggle1").click(function(){$("#1").toggle(700)});

})

2.滑動效果

①向上收縮效果

slideUp(speed,[callback])  通過高度的變化方式向上隱藏元素,並在隱藏完成後可選的觸發一個回撥函式。

②向下展開效果 

slideDown(speed,[callback])  通過高度的變化方式向下顯示元素,並在顯示完成後可選的觸發一個回撥函式。

③交替伸縮效果 

slideToggle(speed,[callback]) 切換匹配元素的高度的方式來改變可見狀態,原來可見切換為不可見,原來不可見切換為可見。

$("#slideup1").click(function(){$("#1").slideUp(700)});

$("#slidedown2").click(function(){$("#1").slideDown(700)});

$("#slidetoggle").click(function(){$("#1").slideToggle(700)});
 

3.淡入淡出效果

通過控制匹配元素的不透明度來實現元素的顯示與隱藏

①淡入效果

fadeIn(speed,[callback])  通過不透明度的變化逐漸將匹配元素顯現出來

$("#fadein").click(function(){$("#1").fadeIn("slow")});

②淡出效果

fadeOut(speed,[callback])  通過不透明度的變化逐漸將匹配元素隱藏起來

③自定義不透明度

淡入或淡出的最終結果為自定義的透明度

fadeTo(speed,opacity,[callback])  opacity的值域是0～1之間

4.自定義動畫效果

①自定義動畫

animate(params,duration,[easing],[callback])  返回值:jQuery  引數-params:一個包含類似CSS樣式設定的json物件,該物件決定了匹配元素要變成什麼樣子,如:{height:"100%",width:"70%",fontSize:"4em",color:"white"}但這些樣式屬性的名字與CSS的命名不同,它們使用駱駝命名法如fontSize 而在CSS中是font-size  duration:類似於前面幾個函式的speed引數,表示匹配元素從開始變化到最終結束變化的時長,其值的設定也一樣String,Number  easing:這個不太明白,要使用的擦除效果的名稱(需要外掛支援),預設jQuery提供linear和swing|String  callback：回撥函式，表示函式結束後執行什麼

$(function(){

$("#3").mouseover(function(){$(this).stop().animate({left:"0px"})

}).mouseout(function(){$(this).stop().animate({left:"-180px"},3000)})

})

以上實現了我們經常在網頁上見的滑動框的效果,一開始框在瀏覽器左側露出20px,當滑鼠滑到上面時框全部露出,滑鼠滑出框時框又只露出20px, 我們看到params中的樣式屬性都出現在了"原來的樣子中-style屬性中"。另外對於位置變化的動畫效果,要先給元素定位,如本處的position:absolute。這個例子中另外一個需要注意的是stop()函式:停止所有在指定元素上正在執行的動畫。

$("#3").mouseover(function(){$(this).stop().animate({height:"toggle","width:"toggle"})})

如上樣式屬性值設成toggle的話表示在有和無之間進行切換

②jQuery動畫佇列

把針對某個匹配元素的多個動畫操作放入一個佇列中進行管理,這是預設設定,這樣佇列中的動畫會按先後順序一個一個執行

如果不希望某個動畫按順序執行,而是希望它最先執行,可以如下設定animate()函式,這是animate函式的有一種寫法,它將除parmas以外的引數也用一個json物件來表示

$("#id").animate(parmas,{queue:false,duration:1000}).animate(parmas,{queue:false,duration:1000})

以上倆動畫會同時執行,總耗時1秒,而

$("#id").animate(parmas,{duration:1000}).animate(parmas,{duration:1000})

這倆動畫會一個一個執行,總耗時2秒

以上所講的所有動畫函式均屬於動畫佇列函式

它們可以被佇列控制函式所控制

當然佇列控制函式不僅僅只能控制動畫佇列函式,也能控制其他普通函式

如佇列控制函式queue()函式