jQuery Animation實作CSS3動畫範例介紹_jquery

jQuery Animation的工作原理是透過將元素的CSS樣式從一個狀態改變為另一個狀態。 CSS屬性值是逐漸改變的，這樣就可以創造出動畫效果。只有數字值可建立動畫（例如 "margin:30px"）。字串值無法建立動畫（例如 "background-color:red"）。詳細用法請參考jQuery 效果 - animate()方法和官方教學。

像CSS3好多效果因為不是數值的，所以是沒有辦法直接透過animate()方法實現的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，這些方法的一個特點就是它們的值是字元和數字混合在一起的。因此我們是不可以直接用animate()方法來動態地修改它們的值來實現動畫的效果。

如果我們自己用JavaScript實作CSS3動畫，那麼我們只能自已透過setInterval()方法來實現，實作起來比較複雜。其實animate()方法就是基於setInterval()方法進行工作的，但是可以用方便的設定動畫速度，還可以設定是勻速還是變速。 animate()方法的第二種用法有個step參數規定動畫的每一步要執行的函數。我們可以用使用一個不影響元素效果顯著的CSS值來觸發animate()方法，然後在step回呼函數中修改我們想要修改的值，這樣就可以間接地實作動畫了。請看transform範例:

複製程式碼 程式碼如下:

#box {
width:100px;
height:100px;
position:absolute;
top:100px;
left:100px; -indent: 90px;
background-color:red;
}

$('#box').animate({ textIndent: 0 }, {
step: function(now, fx) {
$(this).css('-webkit-transform','rotate(' now 'deg)');
},
duration:'slow'
},' linear');

這裡使用text-indent屬性來觸發動畫，是因為我們這裡沒有文字，所以使用text-indent而不會影響到元素的樣式效果，這裡也可以用font -size等。然後使用animate()方法產生的節奏來實現動畫。以此類推，我們就可以達到很多效果了。具體例子請參考這裡

參考文件
•
jQuery 效果 - animate() 方法 •
.animate()