使用带动画的jquery单击旋转图像180度 [英] Rotate an image 180 degrees on click with jquery with animation

问题描述

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

I'm making a drop down navigation and I would like to use an arrow that rotates to toggle it.

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

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

我只是不确定如何重置它，如完成旋转所以它指向点击第二次及以后的次数再次下降。

I'm just not sure how to make it reset, as in, complete the rotation so it's pointing down again when it's clicked the second and subsequent times.

可能是一个.flip类

Maybe a .flip class with

.flip {transform：rotate（-180deg）;}

并使用 if（）和 addClass（）/ removeCLass（）？

谢谢！

推荐答案

可能会改变

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

到

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

这篇关于使用带动画的jquery单击旋转图像180度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！