jquery animate 動(dòng)畫(huà)效果使用說(shuō)明
2024-05-06 14:13:01
供稿：網(wǎng)友
animate( params, [duration], [easing], [callback] )
用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。
這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.
而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫(huà)結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫(huà)形式。
在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過(guò)在屬性值前面指定 "+=" 或 "-=" 來(lái)讓元素做相對(duì)運(yùn)動(dòng)。
jQuery 1.3中，如果duration設(shè)為0則直接完成動(dòng)畫(huà)。而在以前版本中則會(huì)執(zhí)行默認(rèn)動(dòng)畫(huà)。
點(diǎn)擊按鈕后div元素的幾個(gè)不同屬性一同變化:
代碼如下:
// 在一個(gè)動(dòng)畫(huà)中同時(shí)應(yīng)用三種類型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
animate( params, options )
用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。
這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.
而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫(huà)結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫(huà)形式。
在 jQuery 1.2 中，你可以使用 em 和 % 單位。另外，在 jQuery 1.2 中，你可以通過(guò)在屬性值前面指定 "+=" 或 "-=" 來(lái)讓元素做相對(duì)運(yùn)動(dòng)。
第一個(gè)按鈕按了之后展示了不在隊(duì)列中的動(dòng)畫(huà)。在div擴(kuò)展到90%的同時(shí)也在增加字體，一旦字體改變完畢后，邊框的動(dòng)畫(huà)才開(kāi)始:
代碼如下:
$("#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)畫(huà)。
如果隊(duì)列中有等待執(zhí)行的動(dòng)畫(huà)(并且clearQueue沒(méi)有設(shè)為true)，他們將被馬上執(zhí)行
clearQueue(Boolean):如果設(shè)置成true，則清空隊(duì)列?？梢粤⒓唇Y(jié)束動(dòng)畫(huà)。
gotoEnd (Boolean):讓當(dāng)前正在執(zhí)行的動(dòng)畫(huà)立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等。
點(diǎn)擊Go之后開(kāi)始動(dòng)畫(huà),點(diǎn)Stop之后會(huì)在當(dāng)前位置停下來(lái):
