.animate動畫

標籤：

.animate(params, [duration], [easing], [callback])

params: 結果樣式屬性

duration: 動畫時間長度 也可以用 slow normal fast

easing: 預設jQuery提供"linear" 和 "swing"

callback: 在動畫完成時執行的函數,直接寫function(){}

animate(params, options)

options:

{queue:預設true,}如果設定false則會跳出隊列，直接執行。

 例子：HTML 程式碼:

<button id="go1">» Animate Block1</button><button id="go2">» Animate Block2</button><div id="block1">Block1</div><div id="block2">Block2</div>

jQuery 代碼:

$("#go1").click(function(){  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) //脫離隊列，會和fontSize一起執行     .animate( { fontSize: ‘10em‘ } , 1000 )     .animate( { borderWidth: 5 }, 1000);});$("#go2").click(function(){  $("#block2").animate( { width: "90%"}, 1000 )     .animate( { fontSize: ‘10em‘ } , 1000 )     .animate( { borderWidth: 5 }, 1000);});

點擊按鈕1： 寬度和字型大小同時動畫，然後邊框寬再執行。

點擊按鈕2： 三個動畫按照順序逐一執行。

 

 

結果樣式參考：

 

styles

可能的 CSS 樣式值（提供執行個體）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注釋：CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設定，而非 CSS 名稱（比如 "font-size"）。

.animate動畫