jquery - IE 8 中的 fadeTo 透明度问题

Question

我遇到了在 IE8 中与 fadeTo 结合使用时获得透明度的问题。在我的背景图片 (PNG) 上没有保持透明度的淡入和淡出，而是有一个令人讨厌的黑色边框，否则透明。

我进行了高低搜索，虽然 SO 上有大量看似不错的答案，但我无法找到适合我的答案，我也不知道为什么。

这是我的代码:

    jQuery(document).ready(function($) {

        InOut($('#bubblewrap li:first'));

        function InOut(elem) {
            elem.delay().fadeTo(1500, 1).delay(700).fadeTo(1500, 0, function() {
                if (elem.next().length > 0) {
                    InOut($(this).next());
                }
                else {
                    InOut($(this).siblings(':first'));
                }

            });
        }

        $('#bubblewrap li').mouseover(function() {
            $(this).siblings().add(this).stop(true, false).css("opacity", 0);
            $(this).show().css("opacity", 1);
        });
        $('#bubblewrap li').mouseout(function() {
            if ($(this).is(":visible") == true) {
                InOut($(this));
            }
        });
    });

对于如何将在 SO 上找到的一些常见解决方案工作到我的代码中，是否有人有任何建议？非常感谢任何帮助。

Answer 1

IE8(作为较旧的 IE)无法处理半透明(即 png)元素的不透明度。这正是您在那里看到的。通常设置背景颜色(因此元素没有半透明像素)，以及图像帮助。

在您的情况下，您可以考虑 a) 不褪色但仅显示 IE<9 b) 使用部分 jpg 图像作为背景，并在其上放置 png(需要额外的元素) c) 使用 css3 边框半径重新创建效果和框阴影，让 css3pie 处理它。但它可能不适用于动画 - 还没有尝试过。