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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
牡丹941资料
2021/03/01 无线电
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
input框中的name和id的区别
2016/11/16 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python使用scrapy解析js示例
2014/01/23 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python实现顺序表的简单代码
2018/09/28 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
枚举与#define宏的区别
2014/04/30 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
自我评价个人范文
2013/12/16 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
计算机实训报告总结
2014/11/05 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
导游词之四川武侯祠
2019/10/21 职场文书