jquery animate step 实现 transform css3方法

来源：互联网发布：mysql优化编辑：程序博客网时间：2024/05/17 18:03

利用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>

0 0