本文实例讲述了jQuery实现点击旋转,再点击恢复初始状态动画效果。分享给大家供大家参考,具体如下:
今天遇到要做一个点击+然后开始旋转动画后变成x ,,具体实现如下
html1.
& lt; div类="框旋转"祝辞& lt;/div>& lt; !——需要加一个初始状态——比; >之前 css2.
.box{//普通样式 宽度:100 px; 身高:100 px; 背景:天蓝色; } .rotate1{//旋转后的位置 变换:旋转(45度); 过渡:所有。3线性; -webkit-transform:旋转(45度);//还是兼容一下 -webkit-transtion:所有。3线性; } .rotate{//初始状态的旋转位置 变换:旋转(0); 过渡:所有。3线性; -webkit-transform:旋转(0); -webkit-transtion:所有。3线性; } >之前3.金桥
& lt; script> $(函数(){ $ (" .box ") .click(函数(){ 如果($ ().hasClass(“旋转”)){ (美元).removeClass(“旋转”).addClass (“rotate1”); 其他}{ (美元).removeClass (rotate1) .addClass(“旋转”); } }) }) & lt;/script> >之前效果:
http://tools.jb51.net/code/HtmlJsRun
http://tools.jb51.net/code/WebCodeRun
更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》,《jQuery切换特效与技巧总结》,《jQuery扩展技巧总结》,《jQuery常用插件及用法总结》,《jQuery拖拽特效与技巧总结》,《jQuery表格(表)操作技巧汇总》、《jQuery常见经典特效汇总》及《jQuery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery实现点击旋转,再点击恢复初始状态动画效果示例