当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery实现点击旋转，再点击恢复初始状态动画效果示例

jQuery实现点击旋转，再点击恢复初始状态动画效果示例

2019年01月08日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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>

效果：

感兴趣的朋友可以使用如下工具测试上述代码运行效果：

在线html/css/javascript代码运行工具：

在线html/css/javascript前端代码调试运行工具：

更多关于jquery相关内容还可查看本站专题：《jquery动画与特效用法总结》、《jquery切换特效与技巧总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery拖拽特效与技巧总结》、《jquery表格(table)操作技巧汇总》、《jquery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jquery程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网