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');" />