How To Rotate Image In Place With jQuery?

Question

I am trying to make an image rotate in place with each click (the image is an old-fashioned TV knob). I cannot get it to work despite my best efforts.

The code is below:

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

});

Solution 1

I'm providing a jsFiddle that causes the div to rotate after every mouse click.

Essentially, this is from Example 5 of the jqueryrotate.js plugin.

Reference: jsFiddle

Solution 2

There is a jQuery patch, which enables you to do something like this: http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

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

Or this plugin: http://code.google.com/p/jqueryrotate/ which allow stuff like:

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

( http://jsfiddle.net/mFY22/3/)

Solution 3

Here is a quick example using a jquery plugin called jqueryrotate

See the jsfiddle here.