hi:)好久不见~最近被jquery的animate对某些CSS3特性不兼容搞的头晕眼花，果断百度，阅读了一些高手的博客后突然发现平常很少用到的addClass和removeClass属性居然还可以这么用，真实孤陋寡闻，核心思想是通过CSS3写出可以兼容各项浏览器的标签代码，再写出需要完成的效果（角度rotate，平移translate,切变transform()所谓切变，其实就是把图像的顶部或底部推到一边。缩放scale）通过JQ写出事件被触发时需要调用的addClass，removeClass...
代码如下
css：
<style>
.addw{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.add{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
} .sbw{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sb{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
} </style>
jq：
<script>
$(function(){
var callNavConuter=1;
$("input").hover(function(){
if(callNavConuter==1){
$("img").addClass("addw").addClass("add");
$("img").removeClass("sbw").removeClass("sb");
callNavConuter=0;
}
else{
$("img").addClass("sbw").addClass("sb");
$("img").removeClass("addw").removeClass("add");
callNavConuter=1;
} })
}) </script>