首页 > 代码库 > jquery实现css3动画
jquery实现css3动画
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="http://www.mamicode.com/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动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。