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）。