jq点击旋转动画_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程序设计有所帮助。