jQuery Animation實(shí)現(xiàn)CSS3動(dòng)畫示例介紹
更新時(shí)間:2013年08月14日 09:02:01 作者:
jQuery Animation的工作原理是通過將元素的CSS樣式從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài),下面以一個(gè)實(shí)例為大家詳細(xì)介紹下具體的實(shí)現(xiàn),感興趣的朋友可以參考下
jQuery Animation的工作原理是通過將元素的CSS樣式從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的,這樣就可以創(chuàng)建動(dòng)畫效果。只有數(shù)字值可創(chuàng)建動(dòng)畫(比如 "margin:30px")。字符串值無法創(chuàng)建動(dòng)畫(比如 "background-color:red")。詳細(xì)用法請參考jQuery 效果 - animate()方法和官方教程。
像CSS3好多效果因?yàn)椴皇菙?shù)值的,所以是沒有辦法直接通過animate()方法實(shí)現(xiàn)的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法,這些方法的一個(gè)特點(diǎn)就是它們的值是字符和數(shù)字混合在一起的。因此我們是不可以直接用animate()方法來動(dòng)態(tài)地修改它們的值來實(shí)現(xiàn)動(dòng)畫的效果。
如果我們自己用JavaScript實(shí)現(xiàn)CSS3動(dòng)畫,那么我們只能自已通過setInterval()方法來實(shí)現(xiàn),實(shí)現(xiàn)起來比較復(fù)雜。其實(shí)animate()方法就是基于setInterval()方法進(jìn)行工作的,但是可以用方便的設(shè)置動(dòng)畫速度,還可以設(shè)置是勻速還是變速。animate()方法的第二種用法有個(gè)step參數(shù)規(guī)定動(dòng)畫的每一步要執(zhí)行的函數(shù)。我們可以用使用一個(gè)不影響元素效果顯著的CSS值來觸發(fā)animate()方法,然后在step回調(diào)函數(shù)中修改我們想要修改的值,這樣就可以間接地實(shí)現(xiàn)動(dòng)畫了。請看transform例子:
<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屬性來觸發(fā)動(dòng)畫,是因?yàn)槲覀冞@里沒有文字,所以使用text-indent而不會(huì)影響到元素的樣式效果,這里也可以用font-size等。然后使用animate()方法產(chǎn)生的節(jié)奏來實(shí)現(xiàn)動(dòng)畫。以此類推,我們就可以實(shí)現(xiàn)很多效果了。具體例子請參考這里
參考文檔
•jQuery 效果 - animate() 方法
•.animate()
像CSS3好多效果因?yàn)椴皇菙?shù)值的,所以是沒有辦法直接通過animate()方法實(shí)現(xiàn)的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法,這些方法的一個(gè)特點(diǎn)就是它們的值是字符和數(shù)字混合在一起的。因此我們是不可以直接用animate()方法來動(dòng)態(tài)地修改它們的值來實(shí)現(xiàn)動(dòng)畫的效果。
如果我們自己用JavaScript實(shí)現(xiàn)CSS3動(dòng)畫,那么我們只能自已通過setInterval()方法來實(shí)現(xiàn),實(shí)現(xiàn)起來比較復(fù)雜。其實(shí)animate()方法就是基于setInterval()方法進(jìn)行工作的,但是可以用方便的設(shè)置動(dòng)畫速度,還可以設(shè)置是勻速還是變速。animate()方法的第二種用法有個(gè)step參數(shù)規(guī)定動(dòng)畫的每一步要執(zhí)行的函數(shù)。我們可以用使用一個(gè)不影響元素效果顯著的CSS值來觸發(fā)animate()方法,然后在step回調(diào)函數(shù)中修改我們想要修改的值,這樣就可以間接地實(shí)現(xiàn)動(dò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屬性來觸發(fā)動(dòng)畫,是因?yàn)槲覀冞@里沒有文字,所以使用text-indent而不會(huì)影響到元素的樣式效果,這里也可以用font-size等。然后使用animate()方法產(chǎn)生的節(jié)奏來實(shí)現(xiàn)動(dòng)畫。以此類推,我們就可以實(shí)現(xiàn)很多效果了。具體例子請參考這里
參考文檔
•jQuery 效果 - animate() 方法
•.animate()
相關(guān)文章
jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁面元素樣式的功能,需要的朋友可以參考下2015-12-12jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹
這篇文章主要介紹了jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹,本文首先講解了ajaxFileUpload的參數(shù)、錯(cuò)誤提示等知識,然后給出了簡單使用實(shí)例和ASP.NET MVC模式下的使用實(shí)例,需要的朋友可以參考下2015-05-05CSS+jQuery實(shí)現(xiàn)簡單的折疊菜單
這篇文章主要介紹了CSS+jQuery實(shí)現(xiàn)簡單的折疊菜單的代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-12JQuery對ASP.NET MVC數(shù)據(jù)進(jìn)行更新刪除
這篇文章主要介紹了JQuery對ASP.NET MVC數(shù)據(jù)進(jìn)行更新刪除的相關(guān)資料,需要的朋友可以參考下2016-07-07jQuery刪除節(jié)點(diǎn)的三個(gè)方法即remove()detach()和empty()
jQuery提供了三種刪除節(jié)點(diǎn)的方法,即remove(),detach()和empty(),下面為大家詳細(xì)介紹下jQuery刪除節(jié)點(diǎn)三個(gè)方法的具體使用2013-12-12