快捷導(dǎo)航

jQuery Animation實(shí)現(xiàn)CSS3動(dòng)畫(huà)示例介紹

更新時(shí)間：2013年08月14日 09:02:01 作者：

jQuery Animation的工作原理是通過(guò)將元素的CSS樣式從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)，下面以一個(gè)實(shí)例為大家詳細(xì)介紹下具體的實(shí)現(xiàn)，感興趣的朋友可以參考下

jQuery Animation的工作原理是通過(guò)將元素的CSS樣式從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫(huà)效果。只有數(shù)字值可創(chuàng)建動(dòng)畫(huà)（比如 "margin:30px"）。字符串值無(wú)法創(chuàng)建動(dòng)畫(huà)（比如 "background-color:red"）。詳細(xì)用法請(qǐng)參考jQuery 效果 - animate()方法和官方教程。

像CSS3好多效果因?yàn)椴皇菙?shù)值的，所以是沒(méi)有辦法直接通過(guò)animate()方法實(shí)現(xiàn)的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，這些方法的一個(gè)特點(diǎn)就是它們的值是字符和數(shù)字混合在一起的。因此我們是不可以直接用animate()方法來(lái)動(dòng)態(tài)地修改它們的值來(lái)實(shí)現(xiàn)動(dòng)畫(huà)的效果。

如果我們自己用JavaScript實(shí)現(xiàn)CSS3動(dòng)畫(huà)，那么我們只能自已通過(guò)setInterval()方法來(lái)實(shí)現(xiàn)，實(shí)現(xiàn)起來(lái)比較復(fù)雜。其實(shí)animate()方法就是基于setInterval()方法進(jìn)行工作的，但是可以用方便的設(shè)置動(dòng)畫(huà)速度，還可以設(shè)置是勻速還是變速。animate()方法的第二種用法有個(gè)step參數(shù)規(guī)定動(dòng)畫(huà)的每一步要執(zhí)行的函數(shù)。我們可以用使用一個(gè)不影響元素效果顯著的CSS值來(lái)觸發(fā)animate()方法，然后在step回調(diào)函數(shù)中修改我們想要修改的值，這樣就可以間接地實(shí)現(xiàn)動(dòng)畫(huà)了。請(qǐng)看transform例子:

復(fù)制代碼代碼如下:

 
<div id="box"></div>
#box { 
width:100px; 
height:100px; 
position:absolute; 
top:100px; 
left:100px; 
text-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屬性來(lái)觸發(fā)動(dòng)畫(huà)，是因?yàn)槲覀冞@里沒(méi)有文字，所以使用text-indent而不會(huì)影響到元素的樣式效果，這里也可以用font-size等。然后使用animate()方法產(chǎn)生的節(jié)奏來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。以此類推，我們就可以實(shí)現(xiàn)很多效果了。具體例子請(qǐng)參考這里

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

您可能感興趣的文章: