Rotate a div on button press JQuery

Question

Trying to animate a div when the user clicks on a particular button on the UI. It's just meant to be a simple animation. Below is my code. Everything works fine except for this line

transform:"rotate(260deg)"

I am using Google Chrome and I know that it should be -webkit but this throws an error in the code.

    $("#anim2").on("click", function(){
            console.log("anim2");
            b1.animate({
                left:"250px",
                height:"20px",
                width:"20px",
                opacity:"0.5",
                transform:"rotate(260deg)"
    });
});

Any ideas how I can adjust it so it will work?

possible duplicate of [Animate element transform rotate](http://stackoverflow.com/questions/5462275/animate-element-transform-rotate) — Tomjr260, Oct 23 '13 at 21:09

score 1 · Answer 1 · answered Oct 23 '13 at 21:14

1

Not sure if this can plug into your javascript, but on :hover, this CSS process should do the trick for rotations in Chrome...

transform:rotate(deg);
-webkit-transform:rotate(260deg);

But you could create a CSS class that sets these rules, and invoke that class .on('click'), within your jQuery.

answered Oct 23 '13 at 21:14

klewis

7,459
15
58
102

You could also try using :active within your CSS to get the "click" feel of invoking that process. – klewis Oct 23 '13 at 21:20

Rotate a div on button press JQuery

1 Answers1