Jquery旋转点击旋转图像答案

【问题标题】：Jquery rotation rotate img on clickJquery旋转点击旋转图像
【发布时间】：2016-04-22 03:50:08
【问题描述】：

晚上好。目前我正在使用 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>

查询：

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

我可以看到我只是将它旋转到 180，一旦用户单击按钮转到原始位置，我将如何反转。谢谢

【问题讨论】：

标签： javascript jquery rotation

【解决方案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>

【讨论】：

真的好用，完全排序。谢谢老哥

【解决方案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;
        }
    });
});

【讨论】：