快捷導(dǎo)航

jquery animate 動(dòng)畫效果使用說明

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: