利用jquery animate step 实现 translate(), rotate(), scale(), skew(),等开发方法
animate()方法有个step参数规定动画执行的每一步都要执行step这个回调函数。
我们可以用使用一个不影响元素效果显著的css值来触发animate()开发方法 ，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了
实例：
<style type="text/css">
.demo{width: 100px;
height: 100px;
border: 1px solid red}
</style>
<body>
<div class="demo"></div>
<button>sss</button>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$("button").click(function(){
$(".demo").animate({
aa:"360" //目的就是取一个属性值360
},{
step:function(now,fx){
//console.log(now);
$(".demo").css({"transform":"rotate("+now+"deg)"})
},
duration:1000
});
})
</script><script>
$(".demo").animate({
aa:2,
bb:10
}, {
step:function(now,fx){
//参数step：规定每个动画的每一步完成之后要执行的函数
// now:是当前动画正在改变的属性的实时值；
// fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
// 执行动画的元素：elem;
// 动画正在改变的属性：prop;
// 正在改变属性的当前值：now;
// 正在改变属性的结束值：end;
// 正在改变属性的单位：unit;等
// 可在这里改变animate第1个参数中设置的属性bb在动画结束时的值
if(fx.prop=="bb"){fx.end=5}
//console.log(fx.prop+": "+n);
},
duration:1000
})
</script>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
