當前位置:才華齋>設計>網頁設計>

關於jQuery學習筆記之jQuery的動畫

網頁設計 閱讀(7.73K)

一.系統預定義的動畫函式

關於jQuery學習筆記之jQuery的動畫

1.顯示隱藏函式

show(); //顯示元素(同時增加寬、高、不透明度)

hide(); //隱藏元素

執行hide()隱藏介面元素,相當於將css樣式中的display:none.

我們也可以在函式中加入引數,具體如下:

show("slow");

除了slow取值外,還可以設定為normal,fast,分別代表時間為600,400,200毫秒

我們也可以加如具體時間取值。具體如下:

slow(1000);

這樣代表時間完全顯示出元素的`時間間隔為1000毫秒

2.不透明度函式

fadeIn();//逐漸顯示元素(只增加不透明度)

fadeOut();//逐漸隱退元素

3.高寬度函式

slideDown();//逐漸增加元素高度(只增加元素高度)

slideUp();//逐漸縮短元素高度

二.自定義動畫函式

animate(params,speed,callback);

params:取值為一個樣式屬性和取值的對映

speed:速度

callback:動畫完成時的執行函式

其中params的樣式屬性取值可以是多個屬性,也可以是累增,累減的取值

例子:

複製程式碼 程式碼如下:

$(function(){

$(#id1)k(function(){

$(this)ate({left:"+=500px",height:"200px"},3000,function(){

$(this)("border","5px solid blue")

})

})

})

1.停止元素動畫

stop();

結束當前執行的動畫,並立即執行下面定義的動畫

2.判斷是否在動畫狀態

is(":animate")

3.其他動畫函式

toggle(speed,callback);//立即切換元素狀態(高,寬,不透明度),如果隱藏則切換到顯示,如果顯示則切換的隱藏

sildeToggle(speed,callback);//改變高度方式切換元素狀態

fadeto(speed,opacity,callback);切換到指定的不透明度值