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的DOM操作筆記07-29

jQuery程序設計08-05

jquery提交按鈕的代碼07-28

淺析jQuery 遍歷函數javascript08-06

jQuery中prev()方法用法07-16

jQuery中replaceAll()方法用法10-15

如何理解jquery事件冒泡09-15

jquery之超簡單的div顯示和隱藏特效demo簡介05-15

jQuery 源碼分析和Ready函數06-28

jQuery中parent()和siblings()的問題10-16