jQuery - 位置元素，顯示它，然後動畫它

Question

我試圖定位一個隱藏的div，然後顯示它，然後用一些動畫旋轉它。

這是我走到這一步，這似乎並沒有在所有旋轉它...

$(this).css({ 'left' : randomNum(offsetStartX, offsetEndX), 
    'top' : randomNum(offsetStartY, offsetEndY) }); 
$(this).show("fast"); 
var cssObj = { 
    msTransform: 'rotate(\'+ rotDegrees + \'deg)', 
    '-moz-transform' : 'rotate(\'+ rotDegrees + \'deg)', 
    '-webkit-transform' : 'rotate(\'+ rotDegrees + \'deg)', 
    '-o-transform' : 'rotate(\'+ rotDegrees + \'deg)', 
    'transform' : 'rotate(\'+ rotDegrees + \'deg)' }; 
$(this).animate(cssObj, "slow"); 

如果我的地方left和top的CSS爲var cssObj，它轉動它就好了。不過，我需要將其定位，然後設置爲可見，然後使用動畫進行旋轉。

我該怎麼做？

Answer 1

檢查this question和它的accepted answer。 jQuery animate不能動畫非數字屬性，這就是爲什麼使用rotate(...)作爲值不受支持的原因。但是，您可以使用step（爲任意值創建動畫，並在每一步設置不同的旋轉）。

$(this).show("fast",function() { 
    var element = $(this); 
    var startDegree = 90; 
    var endDegree = 0; 
    $({ i:startDegree }).animate({ i: endDegree }, { 
     step: function(now,fx) { 
      var cssObj = { 
       msTransform: 'rotate('+ now + 'deg)', 
       '-moz-transform' : 'rotate('+ now + 'deg)', 
       '-webkit-transform' : 'rotate('+ now + 'deg)', 
       '-o-transform' : 'rotate('+ now + 'deg)', 
       'transform' : 'rotate('+ now + 'deg)' }; 
      element.css(cssObj); 
     }, 
     duration:500 
    },'linear'); 
}); 

注意，我開始在回調的旋轉動畫show - 因此它只是在啓動後完成元素顯示旋轉。

This fiddle已創建合併您的代碼和該問題的答案中提供的示例代碼（並擴展以支持其他瀏覽器）。您需要對其進行調整，以便旋轉從源程度發生到目標程度（使用變量startDegree和endDegree）。