CODEWITHSUNDEEP
jqueryimagerotation
gfy
gfy

Reputation: 81

How To Rotate Image In Place With jQuery?

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})
    }
 }

});

Upvotes: 7

Views: 24503

Answers (3)

Trufa
Trufa

Reputation: 40727

Here is a quick example using a jquery plugin called jqueryrotate

See the jsfiddle here.

Upvotes: 1

gherkins
gherkins

Reputation: 14973

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/)

Upvotes: 3

arttronics
arttronics

Reputation: 9955

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

Upvotes: 12

Related Questions