jquery - jQueryを使用して画像をその場で回転させる方法は?

Question

クリックするたびに画像をその場で回転させようとしています (画像は昔ながらの TV ノブです)。最善を尽くしても、それを機能させることができません。

コードは以下のとおりです。

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

});

Answer 1

マウスをクリックするたびにdivを回転させるjsFiddleを提供しています。

基本的に、これはjqueryrotate.jsプラグインの例 5からのものです。

参考：jsFiddle

Answer 2

次のようなことができる 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/ )

Answer 3

jqueryrotateという jquery プラグインを使用した簡単な例を次に示します。

こちらのjsfiddleを参照してください。