jQuery - Rotating an image on click and rotating back the next click

Question

I have a fiddle to demonstrate what I'm trying to do.

http://jsfiddle.net/LxtmM/

jQuery:

$(".arrow").on("click", function() {
            $(".arrow").toggleClass("rotate").css({ "-moz-transform" : "rotate(-90deg)", "-webkit-transform" : "rotate(-90deg)", "-ms-transform" : "rotate(-90deg)", "-o-transform" : "rotate(-90deg)" });
        });

Basically, I want it so that when you click the arrow it rotates -90degrees and then rotates back on the next click. I understand that needs some sort of toggle. But I learned that you can just toggle a class that has the CSS3 transform rotate.

When you click it, it rotates and adds the class, if you click it again it removes the class but it doesn't animate back. I'm not sure if I should expect it rotate back when the rotate class is toggled off but it's not working nonetheless.

Thanks!

Answer 1

You missed the point of toggleClass a little. Your rotate class should have the rotated styles. when you call .css(), you're setting the css of the element directly, which is why only the first click seems to work - it sets those exact css styles each time. The rotate class doesn't exist, so toggling it doesn't change the appearance:

http://jsfiddle.net/6xFbF/

$(".arrow").on("click", function () {
    $(this).toggleClass("rotate");
});

...

.rotate {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}