Jquery Rotation drehen img auf Klick

Question

Guten Abend. Im Moment benutze ich jquery rotieren Plugin, um ein Bild zu drehen, sobald geklickt wird, das Bild dreht sich 180 Grad perfekt, aber sobald der Knopf wieder angeklickt wird, um an die ursprüngliche Position zurückzukehren, behält das Bild die 180 Grad-Drehung und ich Ich kann keinen Weg finden, es wieder in eine 0-Grad-Position zu bringen. Kann jemand helfen? Hier ist der Code:

HTML:

<div class="box_one"> 
     <div class="box_one_second" id="box-appear"> 
      <p>some text</p> 
     </div> 
     <button id="button-one"><img id="arrowdown"src="#"/>  </button> 
</div> 

JQUERY:

$(document).ready(function(){ 
     $("#button-one").click(function(){ 
      $(".box_one_second").toggle(200); 
       $("#arrowdown").css('rotate',180); 
     }); 
     }); 

Ich kann sehen, ich bin es nur 180 mit dieser zu drehen, wie würde ich in der Lage sein, einmal zu umkehren Der Benutzer klickt auf die Schaltfläche, um zur ursprünglichen Position zu gelangen. Danke

Answer 1

Ich würde empfehlen, jquery's toggleClass zum Hinzufügen/Entfernen einer Klasse zu verwenden. Dann können Sie die Rotation mit einfachen CSS steuern.

img.rotate { 
 
    transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<img src='http://lorempixel.com/400/200/' /> 
 
<button onclick="$('img').toggleClass('rotate')">Rotate</button>

Answer 2

einen boolean verwenden, ob das Bild bereits gedreht wurde zu speichern.

$(document).ready(function(){ 

     var rotated = false; 

     $("#button-one").click(function(){ 
     if(!rotated){ 
      $(".box_one_second").toggle(200); 
      $("#arrowdown").css('rotate',180); 
      rotated = true 
     } 
     else { 
      // rotate back 
      rotate = false; 
     } 
    }); 
});