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控制旋转。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

单击

2 个答案: