Javascript 使用jquery和动画单击时将图像旋转180度

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

我有这个

我只是不知道如何使它复位，如中所示，完成旋转，以便在第二次和后续时间单击时它再次指向下方

也许是一节课，和我一起上

.flip{transform:rotate（-180度）；}

并使用

if（）

和

addClass（）/removeCLass（）

谢谢大家!

可能会改变

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

到

你可以用

$（文档）.ready（函数（）{
$（“.toggle”）。单击（函数（）{
$（“#image”）.toggleClass（'flip'）；
});
});
#图像{
-moz跃迁：变换1s；
-webkit转换：转换1s；
转变：转变1s；
}
.翻转{
变换：旋转（-180度）；
}
关于
切换类
，您已经得到了另一个答案，但没有一个能解释您的问题

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

您可以使用另一个
toggleClass
示例（这将非常有效）解决此问题，您还可以检查
transform
的当前值是否为
none
，如果是这种情况，请将
设置为-180deg
，否则请将其重置：


$（文档）.ready（函数（）{
$（“.toggle”）。单击（函数（）{
log（$（“#image”）.css（'transform'）；
if（$（“#image”）.css（'transform'）='none'）{
$（“#image”）.css（{'transform'：'rotate（-180deg）}）；
}否则{
$（“#image”）.css（{'transform'：'''}）；
};
});
});
#图像{
-moz跃迁：变换1s；
-webkit转换：转换1s；
转变：转变1s；
}
.翻转{
变换：旋转（-180度）；
}
在下面查找工作代码：

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


默认情况下图像旋转
手动图像旋转
开始旋转停止旋转
$（函数（）{
//默认情况下图像旋转
var角=0；
setInterval（函数（）{
角度+=2；
$（“.auto-rotation”）。旋转（角度）；
},10);
//手动图像旋转
var ang=0；
$（“#开始”）。单击（函数（）{
window.st=setInterval（函数（）{
ang+=4；
$（“.auto-rotation2”）。旋转（ang）；
},10);
});
$（“#停止”）。单击（函数（）{
clearInterval（window.st）；
});
//完例3
});

要获得详细的工作演示代码，只需使用这个简单的方法


$（文档）.ready（函数（）{
$（“.toggle”）。单击（函数（）{
log（$（“#img”）.css（'transform'）；
if（$（“#img”）.css（'transform'）='none'）{
$（“#img”）.css（{'transform'：'rotate（-180deg）}）；
}否则{
$（“#img”）.css（{'transform'：'''}）；
};
});
});
#img{
-moz变换：变换0.5s；
-webkit转型：转型0.5s；
转变：转变0.5s；
}
.翻转图像{
变换：旋转（-180度）；
}

请注意，使用addClass时，动画只执行一次。toggleClass可以无限执行函数。您好，欢迎使用stackoverflow！我们喜欢这里的解释。你能为这个代码推荐一个吗？
$("#image").toggleClass('flip');

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