jQuery应用css不透明度
Posted
技术标签:
【中文标题】jQuery应用css不透明度【英文标题】：jQuery applying css opacity 【发布时间】：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
【参考方案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) 的示例：
但是，IE ≤ 8 中存在与半透明 PNG 的不透明度相关的问题： How to solve/hack fading semi-transparent PNG bug in IE8?
【讨论】：
【参考方案5】：试试这个
filter: alpha(opacity=50);
而不是
opacity:0.5;
【讨论】：
以上是关于jQuery应用css不透明度的主要内容，如果未能解决你的问题，请参考以下文章
JQuery.ready 为时已晚：如何在渲染之前将 CSS 值与 JQuery 一起应用？