Cómo rotar la imagen con jQuery?

Question

Estoy tratando de hacer que una imagen gire en su lugar con cada clic (la imagen es una perilla de TV antigua). No puedo hacer que funcione a pesar de mis mejores esfuerzos.

El código es a continuación:

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

});

Answer 1

estoy proporcionando un jsFiddle que causa el div para girar después de cada clic del ratón.

Esencialmente, esto es de Ejemplo 5 de la jqueryrotate.js plugin.

Referencia: jsFiddle

Answer 2

Hay un parche de jQuery, que le permite hacer algo como esto: http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

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

O este plugin: http://code.google.com/p/jqueryrotate/ que permiten cosas como:

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

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

Answer 3

Aquí hay un ejemplo rápido usando un plugin jquery llamado jqueryrotate

See the jsfiddle here.