jQuery的動畫旋轉格

Question

我想在動畫功能旋轉一個div如

$('div').animate({rotate: '30deg'},1000); 

我發現這一點：

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

但我想知道是否有一個更正式的方式來做到這一點，或者至少是一種不同的方式。

感謝

Answer 1

如果你開到使用jQuery結合使用CSS3，也許這種方法可能有些你有幫助：

HTML

<div id="click-me">Rotate</div> 

<div id="rotate-box"></div> 

CSS

#rotate-box{ 

    width:50px; 
    height:50px; 
    background:#222222; 

} 

@-moz-keyframes rotatebox /*--for firefox--*/{ 

    from{ 
     -moz-transform:rotate(0deg); 
    }  
    to{ 
     -moz-transform:rotate(360deg); 
    }      

} 

@-webkit-keyframes rotatebox /*--for webkit--*/{ 

    from{ 
     -webkit-transform:rotate(0deg); 
    }  
    to{ 
     -webkit-transform:rotate(360deg); 
    }      

} 

#click-me{ 
    font-size:12px; 
    cursor:pointer; 
    padding:5px; 
    background:#888888; 
} 

並假設有問題的元素應該在一個鏈接/ DIV /按鈕的點擊旋轉，你的jQuery將是這個樣子：

jQuery的

$(document).ready(function(){ 
    $('#click-me').click(function(){ 
     $('#rotate-box').css({ 

     //for firefox 
     "-moz-animation-name":"rotatebox", 
     "-moz-animation-duration":"0.8s", 
     "-moz-animation-iteration-count":"1", 
      "-moz-animation-fill-mode":"forwards", 

     //for safari & chrome 
     "-webkit-animation-name":"rotatebox", 
     "-webkit-animation-duration":"0.8s", 
     "-webkit-animation-iteration-count":"1", 
     "-webkit-animation-fill-mode" : "forwards", 

     }); 
    }); 
}); 

如此以來，jQuery有還沒有能夠在.animate（）中支持旋轉（deg），我有點兒被CSS3中的動畫關鍵幀預先定義併爲該特定動畫分配了一個標籤或標識符。在這個例子中，該標籤/標識符被定義爲rotatebox。

從這裏發生的事情是，點擊可點擊的div時，jQuery代碼片段將使用.css（）並將必要的屬性分配給可旋轉元素。在分配這些屬性的那一刻，就會有元素到CSS3動畫關鍵幀的橋樑，從而允許執行動畫。您還可以通過更改動畫持續時間屬性來控制動畫的速度。

我個人認爲只有在需要點擊或鼠標滾動事件來激活旋轉時才需要此方法。如果旋轉應該在文檔加載時立即運行，那麼僅使用CSS3就足夠了。這同樣適用於如果懸停事件應該激活旋轉 - 您只需定義將元素鏈接到元素的僞類中的旋轉動畫的CSS3動畫屬性即可。

我在這裏的方法只是基於這樣的假設，即需要點擊事件來激活旋轉，或者jQuery在某種程度上需要在其中扮演角色。我明白這種方法非常繁瑣，所以如果有人有輸入，隨時提出建議。請注意，由於這種方法涉及CSS3，它不會像在IE8及更低版本上那樣工作。

Answer 2

QTransform允許您旋轉，傾斜，縮放和翻譯，它可以跨瀏覽器工作。

下載幷包含QTransform.js到您的html。

<script src="js/qTransform.js"></script>

提供一個固定的高度，寬度的DIV（S），並添加下面的腳本：

$('#box4').delay(300).animate({rotate: '20deg'}, 500); 
$('#box5').delay(700).animate({rotate: '50deg'}, 500); 
$('#box6').delay(1200).animate({rotate: '80deg'}, 500); 

其中（box4，了Box5 & BOX6是我的DIV的id）。

delay(300), delay(700) & delay(1200)在300,500和1200毫秒後開始動畫。最後的500是動畫的持續時間。

如果要手動提供的旋轉角度，你可以這樣做：

採取變量的角度。例如

var degAngle = 60; 

，並把它添加到腳本像

$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500); 

您也可以提供旋轉一起類似規模的多重影響。例如，

$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500); 

爲什麼QTransform？

截止日期jQuery不支持CSS3動畫。這個插件可以幫助你實現你的目標。

希望這適用於你。

Answer 3

我覺得最簡單的是對的jsfiddle

$(function() { 
    var $elie = $("img"), degree = 0, timer; 
    rotate(); 
    function rotate() { 

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

    $("input").toggle(function() { 
     clearTimeout(timer); 
    }, function() { 
     rotate(); 
    }); 
}); 

http://jsfiddle.net/eaQRx/

Answer 4

下面這個例子是一個使用jQuery的我用來製作動畫的規模代碼和旋轉：

var $elem = $('#myImage'); 
    $({ deg: 0 }).animate({ deg: 359 }, { 
     duration: 600, 
     step: function (now) { 
      var scale = (2 * now/359); 
      $elem.css({ 
       transform: 'rotate(' + now + 'deg) scale(' + scale + ')' 
      }); 
     } 
    }); 

這基本上是從0環到359，旋轉我的圖像那麼多的程度，也縮放0和2之間，所以圖像在動畫過程中從無到有的增加到兩倍。

Answer 5

該解決方案使用CSS3，JQuery和HTML5數據屬性。它允許你使用CSS3 easing在同一個方向上重複旋轉。其他CSS3解決方案通常單向旋轉，然後返回另一個。僅旋轉一個方向（例如順時針方向）對於刷新或加載按鈕等內容非常有用。

<style> 
    .rotate{ 
     -moz-transition: all 0.2s ease; 
     -webkit-transition: all 0.2s ease; 
     transition: all 0.2s ease; 
    } 
</style> 

<div class="rotate" style="width: 100px; height: 100px; background-color: red;"></div> 

<script> 
    $(".rotate").click(function(){ 
     var rotate = 180; 
     var elem = $(this); 

     //get the current degree 
     var currentDegree = 0; 
     if(typeof(elem.attr('data-degree')) != 'undefined') { 
      currentDegree += parseInt(elem.attr('data-degree'), 10); 
     } 

     //calculate the new degree 
     var newDegree = currentDegree + rotate; 

     //modify the elem css 
     elem.css({ WebkitTransform: 'rotate(' + newDegree + 'deg)'}); 
     elem.css({ '-moz-transform': 'rotate(' + newDegree + 'deg)'}); 
     elem.css('transform','rotate(' + newDegree + 'deg)'); 

     //store the degree for next time 
     elem.attr('data-degree', newDegree); 
    }); 
</script> 

注意：我將當前度存儲在數據屬性中以避免必須解析轉換矩陣。