rotating div with jquery and adding css classes with jquery

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);
});
});

You might want to check your jsFiddle code. css_info_timing should use -webkit-transition, and css_info_rotate should use -webkit-transform. Also, css_info_rotate is not a class, so you shouldn't use toggleClass() with that variable. — Andrew
– Andrew, Commented Sep 28, 2012 at 17:55

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 28, 2012 at 17:56

Giona

21.2k5 gold badges60 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

loriensleafs Over a year ago

so I need to add the css with the jquery specifically, and then I also need to animate it, that's why I had tried to make the two variables with the css.

loriensleafs Over a year ago

oo, looks nice. But is it possible to add that class all in the jquery, sorry I explained that poorly. I don't have access to the CSS portion so I need to do it all with the script, that's why I had tried to do it with variables, haha but then the toggle doesn't seem to work?

Giona Over a year ago

@loriensleafs ok, give me 2 mins

loriensleafs Over a year ago

errr, this runs into the same issue of my needing the css to be added all through the jquery, I dont' have access to the CSS, that's why I had tried but failed at defining them with variables.

loriensleafs Over a year ago

that is very very helpful, thanks so much. One last question, when you add the classes like so $("<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"); can any script access them? Or if starting a new script would you have to define them again?

|

Idrizi.A · Accepted Answer · 2012-09-28 18:02:49Z

1

Try something like this

HTML

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

CSS

#effects_of_yoga_info{
    -webkit-transition: all 1s
}
.css_info_rotate {
    -webkit-transform:rotate(150deg);
}

jQuery

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

DEMO http://jsfiddle.net/Nsryy/

answered Sep 28, 2012 at 18:02

Idrizi.A

12.3k16 gold badges52 silver badges91 bronze badges

1 Comment

Martin Josefsson Over a year ago

This answer helped me! It simply rewinds the animation. Is there any way to instead continue the rotation, so it turns 360 degrees?

Collectives™ on Stack Overflow

rotating div with jquery and adding css classes with jquery

2 Answers 2

Edit

9 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

9 Comments

1 Comment

Related