DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery animate 動畫效果使用說明
jquery animate 動畫效果使用說明
編輯:JQuery特效代碼     
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元素的幾個不同屬性一同變化:
代碼如下:
// 在一個動畫中同時應用三種類型的效果
$("#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(); });
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved