jQuery - 클릭시 이미지 회전 및 다음 클릭 다시 회전

Question

나는 무엇을하려고하는지 보여주기 위해 바이올린을 사용합니다.

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

는 기본적으로, 내가 원하는 그래서 당신은 -90degrees를 회전하고 다음을 클릭 다시 회전 화살표를 클릭 할 때. 어떤 종류의 토글이 필요하다는 것을 이해합니다. 그러나 CSS3 변환 회전이있는 클래스를 토글 할 수 있음을 알게되었습니다.

클릭하면 클래스가 회전하여 추가됩니다. 다시 클릭하면 클래스가 제거되지만 다시 애니메이션되지 않습니다. 회전 클래스가 해제 되어도 작동하지 않을 때 다시 회전해야하는지 잘 모르겠습니다.

감사합니다.

Answer 1

조금 누락되었습니다. toggleClass. 회전 클래스는 회전 된 스타일이어야합니다. .css()으로 전화를 걸면 요소의 CSS를 직접 설정하므로 첫 번째 클릭 만 제대로 작동하는 것입니다. 매번 정확한 CSS 스타일을 설정할 수 있습니다. 회전 클래스는 그래서 모양을 변경하지 않는 토글 존재하지 않습니다

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

http://jsfiddle.net/6xFbF/

...

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