Question

I have a div, when you click it I want it to rotate and then when you click it again it rotates back, a toggle. I’m doing this with CSS transforms, and I need to add the classes also with jquery. I have the classes stored in vars and then am trying to apply them. Here is the jfiddle I’m working on, thanks for your help in advance.

http://jsfiddle.net/nzLUS/3/

here is the code:

<div id="beffects_of_yoga_info" style="width:50px;height:50px;background:red;"></div>

jquery:

$(document).ready(function() {

var css_info_timing = {
"-webkit-transform": "all 1s ease;"
}
var css_info_rotate = {
"-webkit-transition": "rotate(150deg)"
}

$("#effects_of_yoga_info").css(css_info_timing);

$("#effects_of_yoga_info").click(function () {
$("#effects_of_yoga_info").toggleClass(css_info_rotate);
});
});

Answer 1

Here you’re using toggleClass, but you’re actually trying to toggle a property!

 $("#effects_of_yoga_info").toggleClass(css_info_rotate);

---

First of all, add this css class:

.rotated {
    -moz-transform:rotate(150deg);
    -webkit-transform:rotate(150deg);
    -o-transform:rotate(150deg);
    -ms-transform:rotate(150deg);
    transform:rotate(150deg);
    -moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
}​

Then this jQuery listener:

$("#effects_of_yoga_info").click(function () {
    $("#effects_of_yoga_info").toggleClass('rotated');
});

Check the demo

---

Edit

As you don’t have access to CSS, use this code to add the rule dinamically:

$("<style type='text/css'>.rotated{-moz-transform:rotate(150deg);-webkit-transform:rotate(150deg);-o-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg);-moz-transition:all 1s ease;-webkit-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}</style>").appendTo("head");

$("#effects_of_yoga_info").click(function () {
    $("#effects_of_yoga_info").toggleClass('rotated');
});

Another demo