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>
效果:
感兴趣的朋友可以使用如下工具测试上述代码运行效果:
在线HTML/CSS/JavaScript代码运行工具:
http://tools.jb51.net/code/HtmlJsRun
在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.jb51.net/code/WebCodeRun
更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery实现判断滚动条滚动到document底部的方法分析
这篇文章主要介绍了jQuery实现判断滚动条滚动到document底部的方法,结合实例形式分析了jQuery事件响应及针对页面元素属性判断的相关操作技巧,需要的朋友可以参考下2019-08-08jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
这篇文章主要介绍了jQuery添加新内容的四个常用方法,结合实例形式分析了jQuery元素添加append,prepend,after,before四种方法的功能与相关使用技巧,需要的朋友可以参考下2019-03-03通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
相信大家喜欢这个界面无非也是喜欢它的动态磁贴。刚好今天研究了一下如何通过JQuery在网页上模仿这种效果,就贴出来给大家喷一下。虽然是一些很低级的技术,但是也希望有需要的朋友可以参考下2013-07-07
最新评论