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

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);

但是:如果你的背景图像有24位透明PNG正在消失,你需要注意你不能filter: alpha在IE7或IE8中将24位透明PNG与IE浏览器中正确使用的jQuery 结合使用.我相信唯一的方法是transparent在你正在使用的对象上设置背景颜色(除了)filter: alpha

如何测试:只需设置一个背景颜色#list_box中加入这样的事情你的CSS为纯色后您的background-image声明:

#list_box { background-color: red }

如果背景图像仍然存在,并且您的#list_box动画正确(除了可怕的背景),您就知道问题是什么,并且必须找到另一种方法来实现您想要的效果.

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

我正在IE6和IE8的Parallels Mac上进行测试。在Mac方面一切正常。

Answer 4

非常(非常)迟到的答案,但是因为当我在IE8中寻找jquery v animate问题的帮助时,这是谷歌的顶部,我想我会在这里发布它.

我的问题与IE中的hasLayout错误有关,并且将"display:inline-block"添加到要褪色的元素中修复了问题.