CSS transform using jQuery toggleClass

Question

I have a think like this

When the button is clicked, jquery toggles class:

.trans {
    background-color: #ABC;
    transform: translateX(100px) scale(0.5) rotate(180deg);
}

On the <div class="container2">

And when you click the button again, the class is toggled again and the div becomes black and returns to its original position.

When I use jquery to add the style responsible for transform using following code:

$('.trans').css({"transform":"translateX(100px) scale(0.5) rotate(180deg)"});

I get something like this:

http://donkey.ninja/test2/

Problem: The div transforms when clicked, but it doesn't transform back when clicked again, only the color changes back.

Why is that? What's the difference between declaring it in css stylesheet and adding it with jQuery?

Igor Adamenko · Accepted Answer · 2015-03-15 20:03:51Z

2

When you use jQuery selector .trans you add styles not to class (like using CSS), but to DOM-element. So, when you remove class, styles does not remove.

If you want to change CSS using jQuery, you may append style-element to body. Like this:

$('<style>.trans { transform: translateX(100px) scale(0.5) rotate(180deg); }</style>').appendTo('body');

edited Mar 15, 2015 at 20:03

answered Mar 15, 2015 at 19:53

Igor Adamenko

8781 gold badge8 silver badges20 bronze badges

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

1 Comment

maciejro Over a year ago

Works beautifly! Thanks :)

Collectives™ on Stack Overflow

CSS transform using jQuery toggleClass

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related