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

编程学习 2021-07-04 16:47www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery实现点击旋转,再点击恢复初始状态动画效果,结合实例形式分析了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代码运行工具:

在线HTML/CSS/JavaScript前端代码调试运行工具:

更多关于jQuery相关内容还可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板