jquery旋轉旋轉img點擊

Question

晚上好。目前，我正在使用jquery旋轉插件來讓圖片在點擊後立即旋轉，圖片完美旋轉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; 
     } 
    }); 
});