我有一个这样的按钮设置,由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();