標籤：
jquery animate改變元素樣式時，只支援數字值的變化，比如width，height等，但是css3屬性狀態值很多都不是數字值，而是字串和數字混合在一起，比如translate(), rotate()等等，如果要用animate使其支援css3變化，需要用到一個step參數，下面附上小demo：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.0.js"></script> <style> .demo{ width:100px; height:100px; border:1px solid red; } </style></head><body><button>sss</button> <div class="demo"></div> <script> var $elem,applyEffect; $elem=$(".demo"); applyEffect=function($e,v){ $e.css({ ‘-webkit-transform‘: ‘translate3d(0px, ‘ +String(v)+ ‘px, 0px)‘ , ‘-moz-transform‘: ‘translate3d(0px, ‘ +String(v)+ ‘px, 0px)‘ , ‘transform‘: ‘translate3d(0px, ‘ +String(v)+ ‘px, 0px)‘ }); }; applyEffect($elem, 100); $("button").click(function(){ $(".demo").animate({ foo:100 },{ step:function(now,fx){ //console.log(now); //當前正在改變的屬性的即時值 //console.log(fx); //jquery預設動畫隊列的名字 //console.log(fx.elem); //執行動畫的元素 //console.log(fx.prop); //執行動畫的屬性 aa// console.log(fx.now); //正在改變屬性的當前值// console.log(fx.end); //動畫結束之 360 //console.log(fx.unit); //改變的屬性的單位 px //$(".demo").css({"transform":"rotate("+now+"deg)"}); applyEffect($elem, 100-now); }, duration:1000 }); }); </script></body></html>
現在animate第一個參數裡，插入一個欄位，給到設定好的目標值，然後在step裡用css來通過前面給的欄位，來動態類比動畫，通過這樣間接的方式實現了animate對css3動畫的支援.
jquery實現css3動畫
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
