本文通过一个实例讲述了jQuery实现点击旋转，然后点击恢复初始状态的动画效果。分享给大家参考，如下：

今天我要点击一下，然后开始旋转动画，变成x，具体实现如下

1.超文本标记语言

div class='box rotate'/div！-需要添加初始状态-2。半铸钢钢性铸铁(Cast Semi-Steel)。box{ //通用样式宽度width:100px高度：100 px；background:skyblue}.rotate1{ //旋转后的位置是transform : rotate(45)；trans trans : all . 3s线性；-web kit-transform : rotate(45度)；//仍然兼容-WebKit-transition : all.3s线性；}.旋转{ //初始状态变换的旋转位置： rotate(0)；trans trans : all . 3s线性；-web kit-transform : rotate(0)；-webkit-transtion:all .3s线性；}3.JQ

script$(function(){$(')。方框')。单击(function(){ if($(this))。has class(' rotate '){ $(this)。removeClass('旋转')。add CLaSS(' rotate 1 ')；}else{$(this)。removeClass('rotate1 ')。add CLaSS(' rotate ')；} })})/脚本效果：

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

在线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程序设计有所帮助。