我如何在jQuery中实现旋转动画？

Question

我动画一些CSS样式，这样的：

$(".left").animate({ 
    left: '300px', 
    width: '300px', 
    height: '300px', 
    top: '25px' 
}, 1000,'easeInOutQuint', function() { 
}); 

我尝试添加一个transform属性，但它似乎并没有工作。任何解决方案 Fiddle

Answer 1

最佳的解决方案，并在我的情况下工作，用一个小jQuery插件，可以发现here旋转的一个。

Answer 2

您需要报价添加到转换属性，如：

$(".left").animate({ 
    '-webkit-transform': 'rotate(180deg)', 
    '-moz-transform': 'rotate(180deg)', 
    '-ms-transform': 'rotate(180deg)', 
    '-o-transform': 'rotate(180deg)', 
    'transform': 'rotate(180deg)' 
}); 

编辑：我测试了这一点，并发现它不能正常工作。大概jQuery不支持“动画”功能中的CSS3标签。除非别人有更好的主意，否则你可能需要一个插件。要做到这一点

Answer 3

一种方法是添加不使用诸如文本缩进一个属性，然后增加它的价值。为css类'.last'中的文本缩进设置一些值。检查下面的代码示例。

$('.left').animate({ 
    left: '300px', 
    width: '300px', 
    height: '300px', 
    top: '25px', 
    textIndent: '0px' 
}, 
{ 
    step:function(now,fx) { 
     $(this).css('-webkit-transform','rotate('+now+'deg)'); 
    } 
}); 

希望这可以解决您的问题。或者你可以简单地使用css3动画属性。