如何jQuery动画旋转

时间:2013-11-17 19:33:28

标签: javascript jquery dom animation rotation

我在这里有这个jQuery插件:

$.fn.jqrotate = function(degrees, options)
{
    var options = $.extend({ 
                animate : false // not yet implemented
                }, options);

                return this.each(function()
                {
                    var $this = $(this);

                  var oObj = $this[0];
                  var deg2radians = Math.PI * 2 / 360;

                  var rad = degrees * deg2radians;
                  var costheta = Math.cos(rad);
                  var sintheta = Math.sin(rad);

                  a = parseFloat(costheta).toFixed(8);
                  b = parseFloat(-sintheta).toFixed(8);
                  c = parseFloat(sintheta).toFixed(8);
                  d = parseFloat(costheta).toFixed(8);

                  $this.css( {  '-ms-filter' : 'progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + b + ', M21=' + c + ', M22=' + d + ',sizingMethod=\'auto expand\')',
                                'filter' : 'progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + b + ', M21=' + c + ', M22=' + d + ',sizingMethod=\'auto expand\')',
                                '-moz-transform' :  "matrix(" + a + ", " + c + ", " + b + ", " + d + ", 0, 0)",
                                '-webkit-transform' :  "matrix(" + a + ", " + c + ", " + b + ", " + d + ", 0, 0)",
                                '-o-transform' :  "matrix(" + a + ", " + c + ", " + b + ", " + d + ", 0, 0)"
                  });


                });  
            };

我这样使用:

$(document).ready(function(){
    var degree = 0;
    $(".big-ball").click(function(){
        degree += 90;
        $(this).jqrotate(degree);
    });
});

旋转它的工作非常好,但是我想为旋转过程制作动画,可以用给定的插件做些什么呢? (fyi:将animate: false更改为true无法启用它:))

谢谢。

0 个答案:

没有答案