带有IE 8中阴影的jQuery fadeIn错误?

我有一个后面带有半透明阴影的图像,正在用作div中的背景图像.我遇到了一个问题,当我将div淡入或淡出时,半透明的阴影将显示为黑色,直到淡入淡出为止.当我在FireFox中执行此操作时,它工作正常,我只能使用Internet Explorer 8重现该错误.

您可以在这里看到它的运行状态:http://jsfiddle.net/pVQER/2/

有谁知道为什么会这样?谁能建议解决方法或解决问题?

更新:

在我的真实示例中,该div位于另一个带有渐变的背景图像之上,因此我认为设置背景颜色不起作用.

最佳答案
IE8的透明淡入淡出问题的一般解决方案是将div元素与背景环绕起来,设置其背景颜色,然后使包装元素淡入淡出.

HTML:

<div id = 'bgWrap'><div id="bg">test the background</div></div><br/>
<button id="btn" type="button">Click Me!</button>

CSS:

#bg
{
    background-image:url('http://i.imgur.com/GlEyl.png');   
    height:200px;
    width:300px;
    border:1px solid;
    padding:5px;
}

#bgWrap {
     dispaly: none;
    background: #fff;
}

JS:

$('#btn').click(function() {
      $('#bgWrap').fadeToggle('slow');              
});

编辑

您可以尝试将包装器div的背景设置为1×1透明GIF / PNG,这应该可以消除黑色背景问题,并可以显示基本的背景渐变.

转载注明原文:带有IE 8中阴影的jQuery fadeIn错误? - 代码日志