我如何在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動畫屬性。