给网友朋友们带来一篇相关的编程文章，网友梁如蓉根据主题投稿了本篇教程内容，涉及到jQuery、点击旋转、点击恢复、jQuery实现点击旋转，再点击恢复初始状态动画效果示例相关内容，已被626网友关注，下面的电子资料对本篇知识点有更加详尽的解释。
jQuery实现点击旋转，再点击恢复初始状态动画效果示例
本文实例讲述了jQuery实现点击旋转，再点击恢复初始状态动画效果。分享给大家供大家参考，具体如下：
今天遇到要做一个点击 + 然后开始旋转动画后变成 x 具体实现如下
1.HTML
<div class="box rotate"></div> <!--需要加一个初始状态-->
2.CSS
.box{ //普通样式
width:100px;
height:100px;
background:skyblue;
}
.rotate1{ //旋转后的位置
transform:rotate(45deg);
transtion:all .3s linear;
-webkit-transform:rotate(45deg); //还是兼容一下
-webkit-transtion:all .3s linear;
}
.rotate{ //初始状态的旋转位置
transform:rotate(0);
transtion:all .3s linear;
-webkit-transform:rotate(0);
-webkit-transtion:all .3s linear;
}
3.JQ
<script>
$(function(){
$(".box").click(function(){
if($(this).hasClass("rotate")){
$(this).removeClass("rotate").addClass("rotate1");
}else{
$(this).removeClass("rotate1").addClass("rotate");
}
})
})
</script>
效果：
希望本文所述对大家jQuery程序设计有所帮助。
