javascript按钮+ css过渡闪烁在safari上

时间:2012-12-10 14:19:23

标签: javascript jquery

我有一个这样的按钮设置,由javascript和触发css过渡控制,我试图将问题复制到一些更简化的情况,但闪烁只是不会发生,但只发生在这个按钮设置,问题可能不在此代码中,或者可能是。

输出是,当鼠标悬停在按钮上时,它会在webkit浏览器上闪烁0.5秒,如果将border:2px solid red放在按钮上,则背景大小将不再是100%,看起来越野车 我试过放:

-webkit-backface-visibility: hidden;
-webkit-transform      : translateZ(0); 
-webkit-transform      : translate3d(0,0,0);    
-webkit-perspective:1000;

一切无助..我做错了什么?

 var btns = {
         'bg_o' : ['images/services/btn1.png','images/services/btn2.png','images/services/btn3.png','images/services/btn4.png'],
         'bg_h' : ['images/services/btn1_hover.png','images/services/btn2_hover.png','images/services/btn3_hover.png','images/services/btn4_hover.png'],
         '$all_btn' : $('.all_btn'),
         '$folders':[$('#folder1'),$('#folder2'),$('#folder3'),$('#folder4')],
         'folders_status':['inactive','inactive','inactive','inactive'],
         'timer':null
         ,jquery_func : function(){
            btns.$all_btn.each(function(){

                $(this).click(function(){
                    if($(this).attr('id')=='service_btn1'){
                        ajax1();
                    }

                    if($(this).attr('id')=='service_btn3'){
                        ajax3();
                    }
                    var imageurl_o = new Array();

                    for(i=0;i<4;i++){
                        imageurl_o[i] = {'background':'url('+btns.bg_o[i]+')','background-size':'100% 100%'};       
                        btns.$folders[i].css(imageurl_o[i]);    
                        btns.folders_status[i]='inactive';
                    }

                    for(i=0;i<4;i++){           
                        var myparent = btns.$folders[i].parent();                       
                        if($(this).attr('class') == myparent.attr('class')){
                            var imageurl_h = {'background':'url('+btns.bg_h[i]+')','background-size':'100% 100%'};
                            btns.$folders[i].css(imageurl_h);   
                            btns.folders_status[i]='active';
                        }   
                    }
                });


                $(this).on('mouseenter',function(){
                    console.log('out')
                    var imageurl_o = new Array();

                    for(i=0;i<4;i++){
                        imageurl_o[i] = {'background':'url('+btns.bg_o[i]+')','background-size':'100% 100%'};
                    }
                    for(i=0;i<4;i++){
                        if(btns.folders_status[i]=='inactive'){
                            btns.$folders[i].css(imageurl_o[i]);
                        }
                    }


                    clearTimeout(btns.timer);
                    var imageurl_h = null;
                    var go = null;
                    for(i=0;i<4;i++){           
                        var myparent = btns.$folders[i].parent();                       
                        if($(this).is(':visible')&&$(this).attr('class') == myparent.attr('class')){
                            $(this).stop(true);
                                imageurl_h = {'background':'url('+btns.bg_h[i]+')','background-size':'100% 100%'};
                                go=imageurl_h;
                                if(imageurl_h!=null && go!=null){
                                    btns.$folders[i].css(go);   
                                    btns.$folders[i].css(go);   
                                    btns.$folders[i].css(go);   

                                }
                        }   
                    }

                    btns.timer = setTimeout(function(){
                        var imageurl_o = new Array();
                        for(i=0;i<4;i++){
                            imageurl_o[i] = {'background':'url('+btns.bg_o[i]+')','background-size':'100% 100%'};
                        }
                        for(i=0;i<4;i++){

                            if(btns.folders_status[i]=='inactive')
                            btns.$folders[i].css(imageurl_o[i]);
                        }
                    },1000);


                });


            }); 
         }
     }
     btns.jquery_func();

0 个答案:

没有答案