jQuery应用CSS透明度

Question

我尝试在IE中实现不透明度，目前正在测试IE8，Chrome等浏览器可以正常工作，但IE8效果很差。

我的代码如下：

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

并且

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

这个div中的图片应用了不透明度，但是文本没有变化，这让我非常愤怒:( 有人可以帮我吗？提前感谢。

- green_arrow

---

我发现fadeTo()是一种可靠的跨浏览器方式来动画化透明度。http://api.jquery.com/fadeTo/ - m90

Answer 1

试试这个:

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

希望这对您有所帮助

- Rony SP

Answer 2

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

or

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

or

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

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

- Jonathan Joosten

---

你的第一个建议行不通，因为速度是第一个参数，但这似乎是这里最正确的解决方案。 - Andrew Magill

Answer 3

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

以下是使用 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

然而，与半透明PNG的不透明度有关的IE≤8问题存在： 如何解决/黑客淡入半透明PNG错误在IE8？

- Adam

Answer 4

IE8 不会将透明度应用于没有布局的元素。请参阅此答案 Opacity CSS not working in IE8。

- Naigel

Answer 5

试试这个

filter: alpha(opacity=50);

替代

opacity:0.5;

- Priyank Patel