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

来源：懂视网责编：小采时间：2020-11-27 22:02:38

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

jQuery实现点击旋转，再点击恢复初始状态动画效果示例:本文实例讲述了jQuery实现点击旋转，再点击恢复初始状态动画效果。分享给大家供大家参考，具体如下：今天遇到要做一个点击 + 然后开始旋转动画后变成 x 具体实现如下 1.HTML <div class=box rotate></div> <!--需

推荐度：

点击下载本文 文档为doc格式

导读jQuery实现点击旋转，再点击恢复初始状态动画效果示例:本文实例讲述了jQuery实现点击旋转，再点击恢复初始状态动画效果。分享给大家供大家参考，具体如下：今天遇到要做一个点击 + 然后开始旋转动画后变成 x 具体实现如下 1.HTML <div class=box rotate></div> <!--需

本文实例讲述了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程序设计有所帮助。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

标签：实例点击旋转旋转动画

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐