ie8中嵌套元素的jQuery/css淡入淡出问题（仅限）

可能重复：

我正在淡入淡出一组嵌套元素，以显示页面的背景图像。 嵌套的div/article元素被赋予了alpha通道不透明度，这在IE中被半透明png覆盖

淡入淡出功能在FF、Chrome、ie6（是的，ie6！！！）、ie7和ie9中运行良好，但不幸的是在ie8中没有

HTML:

jQuery：

 $('#wrapper').children().animate({
    opacity: 0
 }, 2000 );

 setTimeout(function() {
    $('#wrapper').css('visibility' , 'hidden');
 }, 2000);

我也尝试过这个jQuery：

    $('#limiter').children().fadeOut( 2000 );

除ie8外，上述任何组合都适用于所有浏览器。当您尝试将淡出或淡入功能应用于包装父元素时，只会出现一个暂停（淡入动画设置为的时间长度），然后要淡入的元素会立即消失，而不会产生淡入效果

我已经在这方面工作了几天，用尽了谷歌的解决方案和可能的修复/变通办法，甚至没有什么能接近

有人有什么想法吗

你好，马特

编辑：

我在调试这个问题上取得了一些进展

我删除了对半透明背景的所有引用，并尝试应用jQuery淡入淡出动画，只是为了检查背景是否掩盖了真实问题

有趣的是，即使没有应用半透明背景（也使用完全不透明的背景进行测试），淡入淡出动画仍然不起作用。完全相同的症状。 因此，我进行了快速搜索，并在jQuery Bug跟踪器上找到了以下内容：

根据本页上的注释，我应用了

filter:inherit添加到子容器中，这起了作用。现在内容（文本和图像）淡入淡出，但背景（不透明或（半透明）不淡出。在延迟期间，它仍然保持不变，然后捕捉可见或不可见

有人想过如何进一步解决这个问题吗

编辑：

在ie9中测试，效果很好。此错误仅与ie8相关

谢谢你，马特。
在你的css上试试这个：

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.4);
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=40);
}
.alpha50Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-50.png");
    /* RGBa with 0.5 opacity */ 
    background: rgba(0, 0, 0, 0.5);
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);
}

如果您对其他浏览器没有其他问题，这应该可以工作……当然，您必须相应地更新jquery

编辑：

这是一个示例jquery，它可以将不透明度设置为0.4。如果您希望在页面加载后具有标准的不透明度，则不需要诅咒jquery，但是如果您需要在一个触发事件上更改en元素的不透明度，则必须使用类似的jquery

编辑：

如果我没有弄错你的问题，我就在一个星期内提出了一个解决办法。我不能在旧的ie版本中测试它。我希望能奏效：）
我不确定这是否是你的问题，但我认为你的背景设置错了：

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background: rgba(0, 0, 0, 0.4)
}

是一个快捷方式属性，用于同时设置多个值。如果在执行此操作时忽略了子值，则会重置其他值。您应该改用单个背景属性：

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background-color: rgb(0, 0, 0);
    background-image: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background-color: rgba(0, 0, 0, 0.4)
}

当您说“您必须相应地更新jquery”时，我需要更新什么？我刚刚测试了这一点，有两个问题：1。问题仍然存在；jQuery淡入淡出不起作用，它只是在延迟之后突然捕捉到不可见的淡入淡出。2.将过滤器应用于css会以相同的不透明度渲染所有内容（文本和图形）。我知道IE的所有形式都是垃圾，但有什么想法吗？嗨，我刚刚测试了你的JSFIDLE解决方案，它的行为与我在IE8中测试时的行为相同。在延迟期间暂停，不褪色，然后立即消失。对不起，是的，你是对的，但从我读到的来看，这是有意的。通过按此顺序设置背景，首先为最不兼容的浏览器提供最基本（也是最不可取的）设置，然后按首选项的顺序列出设置，将最首选项保留到最后。如果浏览器不支持设置（据我所知），它将忽略该设置，从而仅应用它能够渲染的最优选设置。如果我错了，请有人纠正我。谢谢。我想你的方法可能存在的问题是，支持png和rgba背景的浏览器将同时呈现这两种背景。我还没有测试出来，所以如果我错了，请有人随时纠正我。谢谢。我刚刚测试了这个理论，它在png背景和FF中的RGBa背景中都有呈现。
jQuery:
$('#wrapper').children().animate({
    opacity: 0.4,
    filter: 'alpha(opacity=40)'
 }, 2000 );

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0);
    background: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background: rgba(0, 0, 0, 0.4)
}

.alpha40Black {
    /* Fallback for web browsers that doesn't support RGBa */ 
    background-color: rgb(0, 0, 0);
    background-image: url("../images/blk-40.png");
    /* RGBa with 0.4 opacity */ 
    background-color: rgba(0, 0, 0, 0.4)
}