jquery總結06-動畫事件04-自訂動畫

標籤：slow   order   win   show   line   height   注意   樣式   margin   

.animate(params,[speed],[easing],[fn])

params,[speed],[easing],[fn]Options,Number/String,String,FunctionV1.0
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時間長度的毫秒數值(如：1000)
easing:要使用的擦除效果的名稱(需要外掛程式支援).預設jQuery提供"linear" 和 "swing".
fn:在動畫完成時執行的函數，每個元素執行一次。

這個函數的關鍵在於指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.

而每個屬性的值表示這個樣式屬性到多少時動畫結束。如果是一個數值，樣式屬性就會從當前的值漸層到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字串值，則會為該屬性調用預設的動畫形式。

$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});

$aaron.animate({
height: ‘50‘
}, {
duration :2000,
//每一個動畫都會調用
step: function(now, fx) {
$aaron.text(‘高度的改變值:‘+now)
}
})

.stop( [clearQueue ], [ jumpToEnd ] )

.stop(); 停止當前動畫，點擊在暫停處繼續開始
.stop(true); 如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那麼在隊列中的動畫其餘被刪除並永遠不會運行
.stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值

1. stop()：只會停止第一個動畫，第二個第三個繼續
2. stop(true)：停止第一個、第二個和第三個動畫
3. stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態 

jquery總結06-動畫事件04-自訂動畫