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

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

我有这个


$(document).ready(function() {


$(".toggle" ).click( function() {


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


});


});



可能是一个.flip类

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

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

谢谢!

时间:

改变


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




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



你可以使用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"/>

在下面找到工作代码:


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



详细的工作演示代码单击这里

...