FadeIn/FadeOut在Chrome中出现奇怪的故障 - 仅在Mac上！

在Chrome浏览器中查看我的jQuery鼠标悬停字幕功能时发现了一个非常奇怪的问题 - 但只能在Mac上使用！我的朋友使用Windows 7，他所有的浏览器都能正确，顺畅地显示js。不过，我已经在众多Mac电脑上测试过，而Mac版Chrome浏览器似乎无法处理它！FadeIn/FadeOut在Chrome中出现奇怪的故障 - 仅在Mac上！

FF和Safari在两个操作系统中都很完美（在Safari中稍微平滑）。

首先，这里是我正在建设的网站here。该功能是投资组合部分中每个项目的鼠标悬停。

的JS：

$(document).ready(function() { 
$('.item .caption').hide(); 
//On mouse over 
$('.item').hover(function() { 
    //Display the caption 
    $(this).find('div.caption').stop(true, true).fadeIn(300); 
}, 
//When mouse leave 
function() { 
    //Hide the caption 
    $(this).find('div.caption').stop(true, true).delay(700).fadeOut(300); 
});});

的CSS：

.item { 
    float:left; 
    height: 215px; 
    margin: 7px; 
    width: 225px; 
    position: relative; 
    background: #cacbce;  
} 

.item .caption { 
    background: url(images/hoverbg.png) repeat; 
    box-shadow:inset 0px 0px 250px #000; 
    -moz-box-shadow:inset 0px 0px 250px #000; 
    cursor: pointer; 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    position: absolute; 
    top: 0; 
}

漂亮的标准功能，我相信你会同意。有没有人有任何想法出了什么问题？

我使用Chrome 10.0.648.133（截至2011年3月15日为止）。我开始认为这是浏览器的问题！

来源

2011-03-15 Will Viles

我有同样的问题，但有趣的事情，与Mac一切正常，如果页面打开外部显示器。这真的很奇怪：D – Daggeto 2015-11-06 07:14:17

这已解决。

Chrome在你应用JS到的元素内部存在盒子阴影css的困难。一旦我删除它，它完美运作。我会在Chrome开发论坛上提出这个问题。

来源

2011-03-15 11:42:14

FadeIn/FadeOut在Chrome中出现奇怪的故障 - 仅在Mac上！

回答

相关问题