jQuery中animate()方法用法實例_jquery

本文實例講述了jQuery中animate()方法用法。分享給大家供大家參考。具體分析如下：

此方法用於建立自訂動畫，並且能夠規定動畫執行時長、擦除效果。動畫完成後還可以地觸發一個回呼函數。

animate()方法的使用:

方式一:

以「屬性名稱/值」物件的方式定義動畫終止樣式屬性。 例如:

複製程式碼 程式碼如下:

$("div").animate( {width:"1000px"})

以上程式碼能夠將div從原有的寬度調整到1000px。也可以一次使用多組“屬性名/值”物件。例如:

複製程式碼 程式碼如下:

$("div").animate( {width:"1000px",fontSize: 20})

以上程式碼能夠將div從原有的寬度調整到1000px，從原有的字體大小調整到20px。需要特別注意以下三點:

1.如果尺寸沒有單位，那麼預設單位是px。
2.屬性值需要用雙引號包裹，如果屬性值是數字的話可以省略。
3.類似font-szie或background-color這樣的屬性需要去掉中間的中橫線，第二個單字首字母要大寫。

animate()方法可以明確的規定動畫效果持續的時間，如果不規定則使用預設值normal。例如:

複製程式碼 程式碼如下:

$("div").animate( {width:"1000px",fontSize: 20},2000)

以上程式碼規定動畫效果在2000毫秒(2秒)後完成。
在動畫執行完成後可以呼叫回調函數。例如:

複製程式碼 程式碼如下:

$("div").animate( {width:"1000px"},5000 ,function(){alert("調整完成")})

以上程式碼能夠在動畫完成以後觸發回調函數，於是彈出一個提示框。
實例代碼:

複製程式碼 程式碼如下:

 


 

小螞蟻

  執行個動畫

方式二:
方式一中，只有定義動畫終止樣式屬性的時候使用大括號{}，後面例如動畫速度、回呼函數等等都是裸露的，他們之間都是用逗號間隔。在我們將要介紹的方式二中，速度、回呼函數、佇列等等都要放在大括號{}中。 例如:

複製程式碼 程式碼如下:

$("div").animate( {width:"1000px"}, { queue:false, duration:1000,complete:function(){alert("ok")}})

queue參數可以規定動畫是否加入動畫隊列執行，如果進入動畫隊列，將按照順序執行，也就是第一個動畫執行完成之後，隊列中的第二個動畫再執行，以此類推。如果queue參數值為true就是將動畫加入佇列執行，否則就是不加入佇列。
duration參數就是定義動畫的持續時間。
complete參數定義動畫的回呼函數。
實例代碼:

複製程式碼 程式碼如下:

歡迎來到腳本之家

歡迎來到腳本家

執行第一個動畫
執行第二個動畫

大家可以比較一下加入動畫隊列和不加入動畫隊列執行效果。

希望本文所述對大家的jQuery程式設計有所幫助。