jQuery应用css不透明度答案

【问题标题】：jQuery applying css opacityjQuery应用css不透明度
【发布时间】：2012-04-25 15:56:31
【问题描述】：

我试图让不透明度在 IE 中工作，我目前正在 IE8 中进行测试，Chrome 等工作正常，但 IE8 很糟糕。

我的代码是：

$('#mydiv').animate({'opacity': '0.5'});

和

$('#mydiv').css('opacity', 0.5);

不透明度应用于此 div 中保存的图像，但没有文本，这非常令人生气 :( 有人可以帮助我吗？提前谢谢。

【问题讨论】：

我发现fadeTo() 是一种可靠的跨浏览器动画不透明度的方法。 api.jquery.com/fadeTo

标签： jquery css internet-explorer opacity

【解决方案1】：

试试这个：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */
filter: alpha(opacity=75); /* older IEs */

希望对你有帮助

【讨论】：

【解决方案2】：

$('#mydiv').fadeTo(0.5);

或

$('#mydiv').fadeTo(500,0.5);

或

$('#mydiv').fadeTo("slow",0.5);

http://api.jquery.com/fadeTo/

【讨论】：

您的第一个建议不起作用，因为速度是第一个参数，但这似乎是这里最正确的解决方案。

【解决方案3】：

IE8 不会对没有布局的元素应用不透明度。看到这个答案Opacity CSS not working in IE8

【讨论】：

【解决方案4】：

在使用css("opacity", value) 和fade*() 方法时，jQuery 以兼容 IE ≥ 6 的方式为您处理设置不透明度。但请务必使用与 IE 6、7 和 8 兼容的 jQuery 1.x 库，而不是不兼容的 jQuery 2.x（两者都与 IE ≥ 9 兼容）。

以下是使用css("opacity", value) 和fadeTo(duration, opacity) 的示例：

jQuery 1.x：http://jsbin.com/xabexa/2/edit?html,js,output
jQuery 2.x：http://jsbin.com/xabexa/3/edit?html,js,output

但是，IE ≤ 8 中存在与半透明 PNG 的不透明度相关的问题： How to solve/hack fading semi-transparent PNG bug in IE8?

【讨论】：

【解决方案5】：

试试这个

filter: alpha(opacity=50);

而不是

opacity:0.5;

【讨论】：