使用带有动画的 jquery 在单击时将图像旋转 180 度

Question

我正在制作一个下拉导航，我想使用一个旋转的箭头来切换它。

我有这个https://jsfiddle.net/jaUJm/39/

$(document).ready(function() {
$( ".toggle" ).click( function() {
    $("#image").css({'transform': 'rotate(-180deg)'});
});
});

我只是不确定如何重置它，例如，完成旋转，以便在第二次和后续点击时它再次指向下方。

也许一个 .flip 类

.flip { transform: rotate(-180deg);}

并使用if()和addClass()/removeCLass() ？

谢谢！

Answer 1

您可以使用toggleClass

 $(document).ready(function() { $( ".toggle" ).click( function() { $("#image").toggleClass('flip'); }); });

 #image { -moz-transition: transform 1s; -webkit-transition: transform 1s; transition: transform 1s; } .flip { transform: rotate(-180deg); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>

Answer 2

可能会改变

$("#image").css({'transform': 'rotate(-180deg)'});

到

$("#image").toggleClass('flip');

Answer 3

您已经得到了关于toggleClass的另一个答案，但没有一个能解释您遇到的问题。

单击后，您成功地将元素的transform设置为-180deg ，但您的问题是在第二次单击时 - 您没有-180deg元素添加另一个-180deg 。 您只需将-180deg的值（再次）设置为transform属性（实际上什么都不做，因为您已经在该元素上设置了-180deg ）。

您可以使用其他toggleClass示例之一（这会很好用）解决此问题，您还可以检查transform的当前值是否为none ，如果是这种情况 - 设置-180deg ，否则 - 重置它：

 $(document).ready(function() { $( ".toggle" ).click( function() { console.log($("#image").css('transform')); if ($("#image").css('transform') == 'none') { $("#image").css({'transform': 'rotate(-180deg)'}); } else { $("#image").css({'transform': ''}); }; }); });

 #image { -moz-transition: transform 1s; -webkit-transition: transform 1s; transition: transform 1s; } .flip { transform: rotate(-180deg); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>

Answer 4

在工作代码下方找到：

<!-- Image rotating by default -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotating by default</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation">
</div>
<!-- End Image rotating by default -->

<!-- Image rotation manually -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotation manually</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation2">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation2">
<div><button id="start">Start Rotation</button> <button id="stop">Stop Rotation</button></div>
</div>
<!-- End Image rotation manually -->

<script src="jquery.min.js"></script>
<script src="jQueryRotate.js"></script>
<script>

$(function() {

// Image rotating by default
var angle = 0;
setInterval(function(){
angle+=2;
$(".auto-rotation").rotate(angle);
},10);


// Image rotation manually
var ang = 0;
$("#start").click(function() {

window.st = setInterval(function(){
   ang+=4;
   $(".auto-rotation2").rotate(ang);
   },10);
});

$("#stop").click(function() {
clearInterval(window.st);
});
// End Example-3

});

</script>

有关详细的工作演示代码， 请单击此处

Answer 5

只需使用这个简单的方法！

 $(document).ready(function() { $( ".toggle" ).click( function() { console.log($("#img").css('transform')); if ($("#img").css('transform') == 'none') { $("#img").css({'transform': 'rotate(-180deg)'}); } else { $("#img").css({'transform': ''}); }; }); });

 #img { -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; transition: transform 0.5s; } .flippingImage { transform: rotate(-180deg); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <img class="toggle" id="img" src="https://i.imgur.com/uLlPUfM.png"/>