1

我有一个这样的按钮集，由 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();
4

0 回答 0