Question

我正在尝试使用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});
}

如何解决此问题？

Answer 1

我的印象是jQuery为你做了整个不透明支持的事情。这适用于所有浏览器吗？

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

Answer 2

你不需要为IE编写特殊的处理程序，jQuery在幕后为你完成所有工作：

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

HOWEVER ：如果您的背景图片有24位透明PNG正在消失，则需要注意您无法合并filter: alpha（jQuery正确使用后面的在IE7或IE8中使用24位透明PNG的IE中的场景。我相信唯一的方法是在您使用的对象上设置背景颜色（transparent除外）filter: alpha

如何测试：只需将#list_box上的背景颜色设置为纯色，方法是在 {{1}之后将相应的内容添加到CSS 中声明：

background-image

如果背景图片仍然存在，并且您的#list_box { background-color: red }动画正确（除了可怕的背景），您就知道问题是什么，并且必须找到另一种方法来完成您想要的效果。

Answer 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:''});
        }
    });
});

我在Parallels的Mac上，在IE6和IE8中测试它。一切似乎都在Mac方面运行良好。

Answer 4

非常（非常）迟到的答案，但是当我在IE8中寻找jquery v animate问题的帮助时，这是谷歌的顶部，我想我会在这里发布。

我的问题与IE中的hasLayout错误有关，并且将“display：inline-block”添加到要褪色的元素中修复了问题。

Answer 5

我遇到了同样的问题：

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

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

Answer 6

在jQuery中，一旦将div设置为IE中的不透明度：0（在标准兼容浏览器中）或过滤器：alpha（opacity = 0），您可以使用

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

自jQuery支持跨浏览器支持，如果你最终通过IE动画过滤器，那么很可能jQuery正在尝试支持IE，并且当jQuery触发不透明度变化x2时会发生冲突。

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

Answer 7

我注意到问题是由位置：容器的相对性引起的。如果“切换”到绝对不透明度动画将起作用。

Answer 8

我在IE 7上遇到了同样的问题，问题是不透明度属性

后面的尾随逗号

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

必须是：

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

Answer 9

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

我只想在Internet Explorer 8中使用fadeTo方法报告一个小错误。如果您的元素“display”设置为“inline”，则无效。我发现你需要把它放到“内联块”然后才能完美运行。网上没有任何相关信息，这不是我第一次遇到这个问题。

不知道这是否是报告此问题的正确方法，但我确信有人会阅读此帖：）

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

Answer 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

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

Answer 11

您可以使用fadeTo来完成您想要的操作：

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

fadeIn和fadeOut会从0到100％进行转换，但上面的内容将允许您淡入任意不透明度。

（http://docs.jquery.com/Effects/fadeTo#speedopacitycallback）

Answer 12

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

总之，一般的问题是IE上的不透明度过滤器，在你的具体情况下你可以做的不多，想想

但是如果你淡入淡出，使用png背景图像来防止问题你只需要删除fx结束后添加的jQuery函数的filter属性。只需使用回调函数，就像这样：

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

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

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

Answer 13

与IE8相同的问题。将“display：inline-block”添加到 .hover2 以解决问题。

$(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);
                                        }
                         );
                }
     );

Answer 14

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

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

14 个答案: