jquery animate 動畫效果使用說明

更新時間：2009年11月04日 22:15:22 作者：

jquery animate 動畫效果使用說明，需要的朋友可以參考下。

animate( params, [duration], [easing], [callback] )
用于創(chuàng)建自定義動畫的函數(shù)。
這個函數(shù)的關(guān)鍵在于指定動畫形式及結(jié)果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.
而每個屬性的值表示這個樣式屬性到多少時動畫結(jié)束。如果是一個數(shù)值，樣式屬性就會從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調(diào)用默認(rèn)的動畫形式。
在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過在屬性值前面指定 "+=" 或 "-=" 來讓元素做相對運動。
jQuery 1.3中，如果duration設(shè)為0則直接完成動畫。而在以前版本中則會執(zhí)行默認(rèn)動畫。
點擊按鈕后div元素的幾個不同屬性一同變化:

復(fù)制代碼代碼如下:

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

用于創(chuàng)建自定義動畫的函數(shù)。
這個函數(shù)的關(guān)鍵在于指定動畫形式及結(jié)果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.
而每個屬性的值表示這個樣式屬性到多少時動畫結(jié)束。如果是一個數(shù)值，樣式屬性就會從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調(diào)用默認(rèn)的動畫形式。
在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過在屬性值前面指定 "+=" 或 "-=" 來讓元素做相對運動。
第一個按鈕按了之后展示了不在隊列中的動畫。在div擴展到90%的同時也在增加字體，一旦字體改變完畢后，邊框的動畫才開始:

復(fù)制代碼代碼如下:

 
$("#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] )
停止所有在指定元素上正在運行的動畫。
如果隊列中有等待執(zhí)行的動畫(并且clearQueue沒有設(shè)為true)，他們將被馬上執(zhí)行
clearQueue(Boolean):如果設(shè)置成true，則清空隊列?？梢粤⒓唇Y(jié)束動畫。
gotoEnd (Boolean):讓當(dāng)前正在執(zhí)行的動畫立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等。
點擊Go之后開始動畫,點Stop之后會在當(dāng)前位置停下來:

復(fù)制代碼代碼如下:

 
// 開始動畫 $("#go").click(function(){ $(".block").animate({left: '+200px'}, 5000); }); // 當(dāng)點擊按鈕后停止動畫 $("#stop").click(function(){ $(".block").stop(); }); 

您可能感興趣的文章: