关于通过addClass与removeClass用jquery控制有良好兼容的CSS3样式

Posted 2020-06-19 滔滔阿拉伯

　　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