Jquery中文網 www.prqmtc.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery學習筆記之jQuery的動畫

jQuery學習筆記之jQuery的動畫

發布時間:2013-07-21   編輯:www.prqmtc.live
jQuery學習筆記之jQuery的動畫,需要的朋友可以參考下。
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).click(function(){
$(this).animate({left:"+=500px",height:"200px"},3000,function(){
$(this).css("border","5px solid blue")
})
})
})


1.停止元素動畫
stop();
結束當前執行的動畫,并立即執行下面定義的動畫

2.判斷是否在動畫狀態
is(":animate")

3.其他動畫函數
toggle(speed,callback);//立即切換元素狀態(高,寬,不透明度),如果隱藏則切換到顯示,如果顯示則切換的隱藏
sildeToggle(speed,callback);//改變高度方式切換元素狀態
fadeto(speed,opacity,callback);切換到指定的不透明度值

您可能感興趣的文章:
jQuery中實現動畫效果的基本操作介紹
jQuery學習筆記之jQuery的動畫
Jquery 自定義動畫概述及示例
jQuery學習筆記之jQuery動畫效果
Jquery 學習筆記(一)
Jquery 基礎學習筆記
jQuery學習基礎知識小結
jQuery Animation實現CSS3動畫示例介紹
jQuery基礎教程筆記適合js新手第1/2頁
jQuery學習筆記之Helloworld

[關閉]
一分赛车计划app