使用带动画的jquery单击旋转图像180度

我正在进行下拉导航，我想使用旋转的箭头来切换它。

我有这个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

可能会改变

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

至

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

Answer 2

您可以使用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); } 

Answer 3

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

单击后，您成功将元素的transform设置为-180deg ，但问题是在第二次单击时 – 您不会-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); }