jquery rotate image onclick

Question

I am trying to achieve this (90 degree rotation), but it fails without errors. This image is within a <a></a> TAG where it has already a toggle jquery function.

<?php echo "<img src='down_arrow.png' onclick='$(this).animate({rotate: \"+=90deg\"});' />"; ?>

Answer 1

Depending on which browser versions you need to support, you could try CSS tranforms.

First, define a CSS class like this:

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

And then you can use jQuery to add the class when clicking the link:

<img src="down_arrow.png" onclick="$(this).addClass('rotated');" />

Answer 2

Use a combination of css rules -webkit-transform and -moz-transform on image click.For example to rotate image by 90 degree apply following css rules on click

$('img').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)" /* For modern browsers(CSS3)  */
    });
});