动画不透明度在 IE 上无法正常工作答案

【问题标题】：Animate opacity doesn't work properly on IE动画不透明度在 IE 上无法正常工作
【发布时间】：2014-09-23 21:34:35
【问题描述】：

我正在尝试使用animate() 来更改div 的高度和不透明度。 div 在 CSS 中具有图像背景。它在 Firefox 和 Safari 上运行良好，但是当我在 IE 中测试它时，背景被删除了。这是我的代码：

if (jQuery.support.opacity) {
    jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
} else {
    jQuery('#list_box').animate({filter: 'alpha(opacity=100)',height: '300px',top: newTop},{duration: 300});
}

我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery internet-explorer animation

【解决方案1】：

我的印象是 jQuery 为您完成了整个不透明度支持的工作。这适用于所有浏览器吗？

$('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});

【讨论】：

你是对的。 jQuery 在不透明度方面处理了跨浏览器的差异。
IE8还是有问题。见stackoverflow.com/questions/1204457/…。

【解决方案2】：

您不需要为 IE 编写特殊的处理程序，jQuery 会在幕后为您完成这一切：

jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop}, 300);

但是：如果您有一个 24 位透明 PNG 作为您正在消失的背景图像，您需要注意不能组合 filter: alpha（jQuery 在幕后正确使用IE) 在 IE7 或 IE8 中带有 24 位透明 PNG。我相信解决它的唯一方法是在您使用 filter: alpha 的对象上设置背景颜色（transparent 除外）

如何测试：只需将#list_box 上的背景色设置为纯色，方法是在您的 CSSbackground-image 声明之后添加类似这样的内容：

#list_box { background-color: red }

如果背景图像仍然存在，并且您的 #list_box 动画正确（可怕的背景除外），您就知道问题出在哪里，并且必须找到另一种方法来完成您想要的。

【讨论】：

您是否有指向更多相关信息的链接？我有一种感觉，这将成为解决方案（即 IE 中没有解决方案），但想了解更多信息。此外，只要我列出我想要的东西，IE 团队中的某个人会做得很好。

【解决方案3】：

我也遇到了同样的问题。当我将不透明度设置为 40% 时，我偶然发现了答案：

$('#list_box').stop().animate({opacity: '.4'},"slow");

我注意到不透明度跳到 100%，然后动画下降到 40%。尤里卡。

所以，现在我在动画之前明确地将不透明度设置为零：

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow");

动画流畅，除了文字在 IE 中看起来仍然很糟糕。

为了清理文本，我在动画之后从 IE 中的 css 中删除了不透明度。这似乎在 IE6 和 IE8 中清除了相当多的文本。

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){
    //remove the opacity in IE
    jQuery.each(jQuery.browser, function(i) {
        if($.browser.msie){
            $('#list_box').css({opacity:''});
        }
    });
});

我正在 Mac 上的 Parallels、IE6 和 IE8 中对其进行测试。 Mac 端似乎一切正常。

【讨论】：

在开始淡出之前将不透明度设置为0，真正让它与IE一起工作。

【解决方案4】：

答案非常（非常）晚，但是当我在 IE8 中寻求 jquery v animate 问题的帮助时，这是谷歌的最高层，我想我会把它贴在这里。

我的问题与IE中的hasLayout错误有关，将“display：inline-block”添加到要淡入淡出的元素中解决了问题。

【讨论】：

【解决方案5】：

我也有同样的问题：

$('#nav li').hover(function() {
 $(this).stop().animate({opacity: '0.4'}, 'slow');
},
function() {
 $(this).stop().animate({opacity: '1'}, 'slow');
});

我只是添加了 float:left;到#nav li css，它解决了这个问题。

【讨论】：

谢谢！为我添加 'float:left' 固定不透明度，并在此过程中加强了我对 IE 的厌恶 :)

【解决方案6】：

在 jQuery 中，一旦 div 设置为 opacity:0（在标准兼容浏览器中）或 filter:alpha(opacity=0) 在 IE 中，您就可以使用

$('#div').animate({opacity:1},100);

由于 jQuery 支持跨浏览器支持，如果您最终通过 IE 为过滤器设置动画，那么 jQuery 很可能正在尝试支持 IE，当 jQuery 触发不透明度更改 x2 时，冲突就来了。

我希望这会有所帮助。我遇到了同样的问题，加上 IE 无法处理包含多个项目的 div 堆栈上的淡入淡出问题。

【讨论】：

【解决方案7】：

我注意到问题是由容器的 position:relative 引起的。如果“切换”到绝对不透明动画将起作用。

【讨论】：

【解决方案8】：

我在 IE 7 上遇到了同样的问题，问题是 opacity 属性后面的逗号

jQuery(this).animate({opacity:1.00,},800);

必须是：

jQuery(this).animate({opacity:1.00},800);

【讨论】：

【解决方案9】：

我找到了一个适合我的解决方案：position:inline-block; 这适用于淡化文本不透明度，我没有尝试使用 CSS 背景图像。无论如何，也许它会有所帮助。

我只是想报告 Internet Explorer 8 中的 fadeTo 方法的一个小错误。如果您的元素“显示”设置为“内联”，它将无法工作。我发现您需要将其放入“inline-block”，然后它才能完美运行。网络上没有这方面的内容，这不是我第一次遇到这个问题。

不知道这是否是报告这个问题的正确方法，但我相信有人会读到这篇文章:)

发现于http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

【讨论】：

【解决方案10】：

我通过向动画元素添加不透明背景解决了这个问题：

CSS：

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 195px;
    height: 274px;
    cursor: pointer;
    background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
    filter: alpha(opacity=0); /* IE6-7 */     
    zoom: 1;
}

JS：

$('.overlay').hover(
    function(){
        $(this).animate({'opacity': 0.7}, 300);
    },
    function(){
        $(this).animate({'opacity': 0}, 250);
    }
);

适用于 IE7-8

希望这会对某人有所帮助；）

【讨论】：

【解决方案11】：

你可以使用fadeTo来完成你想做的事情：

$('#list_box').fadeTo("slow", 0.33);

fadeIn 和 fadeOut 会从 0% 过渡到 100%，但以上将允许您淡入任意不透明度。

(http://docs.jquery.com/Effects/fadeTo#speedopacitycallback)

【讨论】：

【解决方案12】：

IE8 也有同样的问题。在 .hover2 中添加“display: inline-block”解决了这个问题。

$(function() {

        $(".hover1").css("opacity","1.0"); // Default set opacity to 1.0

        // On Mouse over
        $(".hover1").hover( 
                            function () {

                                        // SET OPACITY TO 15%
                                        $("span.hover2").stop().animate({opacity: 0.15}, 1200);
                                        },

                                        // ON MOUSE OUT
                            function () {

                                        // SET OPACITY BACK TO 100%
                                        $("span.hover2").stop().animate({opacity: 1.0}, 1200);
                                        }
                         );
                }
     );

【讨论】：

【解决方案13】：

好的，这可能会有所帮助，我在这个网站上找到了一个关于确切问题的解决方案http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

总之，一般的问题是 IE 上的不透明度过滤器，在您的具体情况下，您无能为力

但如果你淡入淡出，为了防止 png 背景图像出现问题，你只需要删除在 fx 结束时添加的 jQuery 函数的过滤器属性。只需使用回调函数，类似的东西就可以了：

$('#node').fadeOut('slow', function() {<br/>
    this.style.removeAttribute('filter');<br/>
});

如果您的选择器返回多个，请使用 each 函数，如下所示：

$('.nodes').fadeIn('fast',
    function() {
        $(this).each (
            function(idx,el) {
                el.style.removeAttribute('filter');
             }
        );
     }
);

【讨论】：

【解决方案14】：

你使用一些 pngfix 脚本吗？这可能是罪魁祸首。

【讨论】：