标签：
hi:)好久不见~最近被jquery的animate对某些CSS3特性不兼容搞的头晕眼花，果断百度，阅读了一些高手的博客后突然发现平常很少用到的addClass和removeClass属性居然还可以这么用，真实孤陋寡闻，核心思想是通过CSS3写出可以兼容各项浏览器的标签代码，再写出需要完成的效果（角度rotate，平移translate,切变transform()所谓切变，其实就是把图像的顶部或底部推到一边。缩放scale）通过JQ写出事件被触发时需要调用的addClass，removeClass...
代码如下
css：
<style> .addw{ -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .add{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sbw{ -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.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>
一些CSS3特性：http://www.bbs0101.com/archives/248.html
canvas：http://blog.sina.com.cn/s/blog_8fab526c01015tqs.html
关于通过addClass与removeClass用jquery控制有良好兼容的CSS3样式
标签：
原文地址：http://www.cnblogs.com/cjt-cn/p/5252944.html
