恢复html的初始选定状态,jQuery实现点击旋转，再点击恢复初始状态动画效果示例...

本文实例讲述了jQuery实现点击旋转，再点击恢复初始状态动画效果。分享给大家供大家参考，具体如下：

今天遇到要做一个点击 + 然后开始旋转动画后变成 x 具体实现如下

1.HTML

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

$(function(){

$(".box").click(function(){

if($(this).hasClass("rotate")){

$(this).removeClass("rotate").addClass("rotate1");

}else{

$(this).removeClass("rotate1").addClass("rotate");

}

})

效果：

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

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

恢复html的初始选定状态,jQuery实现点击旋转，再点击恢复初始状态动画效果示例...相关推荐

恢复html的初始选定状态,Adobe Photoshop
了解如何在 Adobe Photoshop 中使用"还原/重做"命令和"历史记录"面板来控制图像的状态. 通过使用"还原/重做"命令和&qu ...
jQuery前端开发学习指南(18)——利用jQuery实现元素的隐藏、显示和切换及其动画效果
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 概述在jQuery框架中可便捷地以动画形式隐藏和显示以及切换元素,常用方式有如下三种:默认方 ...
html数字增加动态效果,jQuery实现数字自动增加或者减少的动画效果示例_泠吢_前端开发者...
本文实例讲述了效果图: 2. $(function(){ var obj={ el:$(".up"), max:1000, start:100//增加开始的初始值 } var o ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
jquery mysql实现加入购物车_jQuery实现加入购物车飞入动画效果
HTML 首先载入jQuery库文件和jquery.fly.min.js插件. 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片.价格.名称以及加入购 ...
netsh命令恢复网络_实例的状态检查和自动恢复
关注微信公众号:AWS爱好者(iloveaws) Hello大家好,欢迎来到<AWS解决方案架构师认证 Professional(SAP)中文视频培训课程>,我们今天的课程讨论实例的状态检 ...
jQuery基础：下（事件及动画效果）
//.click()绑定单击事件,回调函数中的参数是当前的jQuery事件$('.i1').click(function(e) {alert('w shi ni baba!');console.log ...
jQuery动画效果之上卷下拉
jQuery动画效果之上卷下拉 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Vis ...
jQuery酷炫的文字动画效果代码
jquery css3文字动画特效点击切换文字动态效果 jquery文字动画特效制作淡出淡进文字轮播动画效果代码 jquery文字提示点击按钮触发文字变大消失动画效果 jquery点击按钮淡出淡进动画 ...

恢复html的初始选定状态,jQuery实现点击旋转，再点击恢复初始状态动画效果示例...

恢复html的初始选定状态,jQuery实现点击旋转，再点击恢复初始状态动画效果示例...相关推荐

最新文章

热门文章