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