如何使用jQuery將圖像旋轉到位？

我試圖讓圖像旋轉到位，每次點擊（圖像是一個老式的電視旋鈕）。儘管我盡了最大努力，但仍無法實現。如何使用jQuery將圖像旋轉到位？

的代碼如下：

var value = 0 
$("#img").rotate({ 
bind: 
{ 
    click: function(){ 
     value +=90; 
     $(this).rotate({ animateTo:value}) 
    } 
}

}）;

來源

2012-06-26 gfy

完成！對不起，我是新來的，所以花了一秒鐘。再次感謝一切=） – gfy

謝謝。此外，一旦你達到15代表（我相信這是關卡），那就是當你可以upvote這意味着「這個答案是有用的」。乾杯! – arttronics

我提供的jsfiddle引起DIV每次鼠標點擊後旋轉。

實質上，這是從實施例的jqueryrotate.js插件5。

參考：jsFiddle

來源

2012-06-26 23:12:06 arttronics

感謝您的全力幫助。非常感激！ – gfy

說實話，它仍然不起作用（但我仍然感謝幫助）。我不知道我在做什麼錯或離開？我甚至有「當前穩定版本的jQueryRotate（jsRotate）v.2.2」@arttronics，你是對的。正是這個例子[http://code.google.com/p/jqueryrotate/wiki/Examples#Example_5]。再次感謝任何幫助。 – gfy

@ arttronics-它的作品！但是 - 而不是圖像旋轉的位置（如jsFiddle中的示例），它遵循更大的圓形路徑，如圍繞一個時鐘的半徑。不知道爲什麼。我使用了確切的代碼。有任何想法嗎？ – gfy

有一個jQuery的補丁，它使您能夠做這樣的事情： http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

$('#img').click(function(){ 
    $(this).animate({rotate: '+=10deg'}, 0); 
});

或者這個插件： http://code.google.com/p/jqueryrotate/允許這樣的東西：

$("#img").rotate({ 
    bind: { 
     click: function() { 
      $(this).rotate({ 
       animateTo: (parseInt($(this).getRotateAngle()) + 10), 
       easing: $.easing.easeInOutExpo 
      }) 
     } 
    } 
});

（http://jsfiddle.net/mFY22/3/）

來源

2012-06-26 22:30:17

這是一個使用名爲的jquery插件的簡單示例

See the jsfiddle here.

來源

2012-06-26 22:38:46 Trufa

@arttronics我發佈了一個更新，現在它隨着每次點擊而旋轉，希望你重新考慮;）當我發佈時，我沒有太多時間，它只是一個快速模擬... – Trufa

但當然！ ** + 1 **爲工作jsFiddle。 – arttronics

@arttronics現在我們正在說'哈哈謝謝，我必須承認我對那件事很懶惰！ – Trufa