jquery旋轉功能不工作

嗨，大家現在我想弄清楚如何旋轉一個div，並使其停止在loctation。我在這方面有一些幫助，但是我不知道我做錯了什麼。任何代碼的幫助都會很好。jquery旋轉功能不工作

<script type="text/javascript"> 
var $elie = $("#super"); 
rotate(1); 

function rotate(degree) { 
$elie.css({ 
    WebkitTransform: 'rotate(' + degree + 'deg)' 
}); 
$elie.css({ 
    '-moz-transform': 'rotate(' + degree + 'deg)' 
}); 

if (degree < 1196) { 
    timer = setTimeout(function() { 
     rotate(++degree); 
    }, 1); 
} 
}

來源

2012-11-29 TheEagle

你不分配給前綴版本嗎？ IE，Firefox和Opera使用前綴不明的版本。 –

我不明白..對不起，iam不是最好的jQuery – TheEagle

該CSS屬性的前綴是'transform'。 –

它看起來像旋轉和停止，但1196的值需要一段時間才能到達。這裏有一個關於發生了什麼的jsfiddle。 http://jsfiddle.net/2x3Us/

HTML：

<div id="super" style="background-color: red">hello</div>

的Javascript：

var $elie = $("#super"); 
rotate(1); 

function rotate(degree) { 
    $elie.css({ 
     '-ms-transform': 'rotate(' + degree + 'deg)', 
     '-webkit-transform': 'rotate(' + degree + 'deg)', 
     '-o-transform': 'rotate(' + degree + 'deg)', 
     '-moz-transform': 'rotate(' + degree + 'deg)' 
    }); 

    console.log(degree); 
    if (degree < 360) { 
     timer = setTimeout(function() { 
      rotate(++degree); 
     }, 1); 
    } 
}

來源

2012-11-29 00:43:25

仍然無法正常工作。我可以問我需要什麼libarys 2使用這個功能？ – TheEagle

你沒有看到div旋轉？現在就試試吧......我添加了一個背景顏色來說明問題。 –

我得到的劑量甚至不旋轉那些。那就是問題 – TheEagle

這裏是我的工作得到了一個可重複使用的版本。希望它能幫助你。

$(function() { 

    var rotateAnimation = function (props) { 
     // init animation props 
     var rotateEl = props.el, 
      curAngle = props.startAngle, 
      endAngle = props.endAngle; 
     // scope angle to parent function 
     var angleValue = 'rotate(' + curAngle + 'deg)'; 

     // define worker function 
     var rotate = function() { 
      // increment the angle 
      curAngle += props.increment; 

      // see if we are done animating 
      if (curAngle >= endAngle) { 
       curAngle = endAngle; 
       clearInterval(timer);//stop looping 

      } 
      // create css value 
      angleValue = 'rotate(' + curAngle + 'deg)'; 
      rotateEl.css({ 
       '-moz-transform': angleValue, 
       '-webkit-transform': angleValue, 
       '-o-transform': angleValue, 
       '-ms-transform':angleValue 
      }); 
     }; 

     var timer = setInterval(rotate, props.delay);//let the fun begin 
    }; 

    $('#super').on('click', function() { 
     rotateAnimation({ 
      el: $(this), 
      startAngle: 0, 
      endAngle: 1234, 
      delay: 1, 
      increment: 3 
     }); 
    }); 

});

來源

2012-11-29 02:45:52

jquery旋轉功能不工作

回答

相關問題