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