私はこのようなボタンセットを持っており、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();