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


Posted in jQuery onDecember 11, 2018

本文实例讲述了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实现点击旋转,再点击恢复初始状态动画效果示例

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

在线HTML/CSS/JavaScript代码运行工具:
http://tools.3water.com/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

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

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

jQuery 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 #jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
You might like
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
代码详解Vuejs响应式原理
2017/12/20 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Python实现类的创建与使用方法示例
2017/07/25 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python实现加密的方式总结
2020/01/19 Python
利用Python计算KS的实例详解
2020/03/03 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
Python pip使用超时问题解决方案
2020/08/03 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
工程概预算专业毕业生求职信
2013/10/04 职场文书
纠风工作实施方案
2014/03/15 职场文书
银行贷款委托书范本
2014/10/11 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
python可视化之颜色映射详解
2021/09/15 Python