JQuery-顺时针旋转div并逆时针旋转

Question

我发现了如何使用JQuery旋转div的链接。

Rotating a Div Element in jQuery以及其他一些文章。

的代码如下

$(function() { 
      var $elie = $("#wheel"); 
      rotate(0); 
      function rotate(degree) { 

       // For webkit browsers: e.g. Chrome 
       $elie.css({ 
        WebkitTransform : 'rotate(' + degree + 'deg)' 
       }); 
       // For Mozilla browser: e.g. Firefox 
       $elie.css({ 
        '-moz-transform' : 'rotate(' + degree + 'deg)' 
       }); 
       $elie.css({ 
        '-ms-transform' : 'rotate(' + degree + 'deg)' 
       }); 

       // Animate rotation with a recursive call 
       setTimeout(function() { 
        rotate(++degree); 
       }, 5); 
      } 

     }); 

可能有人请帮我把这个代码扩展到一个元素顺时针和逆时针像方向盘随机旋转

Answer 1

可以延长jQuery.animate（）来创建这样的jsfiddle

$.fx.step['degree']=function(fx){ 
if(! fx.deg){ 
    fx.deg=0; 
    if($(fx.elem).data("degree")){ 
     fx.deg=$(fx.elem).data("degree") 
    } 
} 
$(fx.elem).css({"WebkitTransform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-moz-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-ms-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)"}); 
$(fx.elem).data("degree",Math.floor(fx.deg+(fx.end*fx.pos))); } 

Answer 2

你只需要改变里面的代码的setTimeout使递增/递减随机

// Animate rotation with a recursive call 
       setTimeout(function() { 
        increment= Math.random() < 0.5 ? -1 : 1; 
        degree+=increment; 
        rotate(degree); 
       }, 5); 

或

increment = Math.floor(Math.random()*3)-1; 

为1,0,1运动