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动画的支持.
时间： 2024-08-27 06:00:56