jquery animate 動畫效果使用說明

animate( params, [duration], [easing], [callback] ) 
用於建立自定義動畫的函數。 
這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每一個屬性都表示一個能夠變化的樣式屬性(如「height」、「top」或「opacity」)。注意:全部指定的屬性必須用駱駝形式,好比用marginLeft代替margin-left. 
而每一個屬性的值表示這個樣式屬性到多少時動畫結束。若是是一個數值,樣式屬性就會從當前的值漸變到指定的值。若是使用的是「hide」、「show」或「toggle」這樣的字符串值,則會爲該屬性調用默認的動畫形式。 
jQuery 1.2 中,你可使用 em 和 % 單位。另外,在 jQuery 1.2 中,你能夠經過在屬性值前面指定 "+=" 或 "-=" 來讓元素作相對運動。 
jQuery 1.3中,若是duration設爲0則直接完成動畫。而在之前版本中則會執行默認動畫。 
點擊按鈕後div元素的幾個不一樣屬性一同變化: 
代碼以下:

// 在一個 jquery動畫中同時應用三種類型的效果 
$("#go").click(function(){ 
$("#block").animate({ 
width: "90%", 
height: "100%", 
fontSize: "10em", 
borderWidth: 10 
}, 1000 ); 
}); 
animate( params, options ) 

用於建立自定義動畫的函數。 
這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每一個屬性都表示一個能夠變化的樣式屬性(如「height」、「top」或「opacity」)。注意:全部指定的屬性必須用駱駝形式,好比用marginLeft代替margin-left. 
而每一個屬性的值表示這個樣式屬性到多少時動畫結束。若是是一個數值,樣式屬性就會從當前的值漸變到指定的值。若是使用的是「hide」、「show」或「toggle」這樣的字符串值,則會爲該屬性調用默認的動畫形式。 
在 jQuery 1.2 中,你可使用 em 和 % 單位。另外,在 jQuery 1.2 中,你能夠經過在屬性值前面指定 "+=" 或 "-=" 來讓元素作相對運動。 
第一個按鈕按了以後展現了不在隊列中的動畫。在 div擴展到90%的同時也在增長字體,一旦字體改變完畢後,邊框的動畫纔開始: 
代碼以下:

$("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); 

stop( [clearQueue], [gotoEnd] ) 
中止全部在指定元素上正在運行的動畫。 
若是隊列中有等待執行的動畫(而且clearQueue沒有設爲true),他們將被立刻執行 
clearQueue(Boolean):若是設置成true,則清空隊列。能夠當即結束動畫。 
gotoEnd (Boolean):讓當前正在執行的動畫當即完成,而且重設show和hide的原始樣式,調用回調函數等。 
點擊Go以後開始動畫,點Stop以後會在當前位置停下來: 
代碼以下:
// 開始動畫 $("#go").click(function(){ $(".block").animate({left: '+200px'}, 5000); }); // 當點擊按鈕後中止動畫 $("#stop").click(function(){ $(".block").stop(); }); 
相關文章
相關標籤/搜索