クリックでJqueryローテーションimgを実行

Question

おはようございます。現時点では、jquery rotateプラグインを使用して画像をクリックするとすぐに回転させることができますが、画像は180度回転しますが、ボタンをもう一度クリックして元の位置に戻ると画像は180度回転し続けますそれを0度の位置に戻す方法を理解することはできません。助けてもらえますか？ここ はコードです：

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

私は一度逆転することができるだろうか、私はこれだけで180にそれを回転しています見ることができますユーザーはボタンをクリックして元の位置に移動します。ありがとう

Answer 1

クラスの追加/削除にjqueryのtoggleClassを使用することをお勧めします。次に、プレーンcssでローテーションをコントロールできます。

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

画像が既に回転しているかどうかを保存するためにブール値を使用します。

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