jQuery applying css opacity

Question

I have tried to get the opacity to work in IE, I am testing in IE8 at the moment, Chrome etc works fine but IE8 is terrible.

My code has been:

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

and

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

The opacity is applied to the images held within this div but none of the text, it's very infuriating :( can anyone help me? Thanks in advance.

I found `fadeTo()` a reliable cross browser way to animate opacity. http://api.jquery.com/fadeTo/ — m90, Apr 13 '12 at 09:25

score 5 · Accepted Answer · answered Apr 13 '12 at 09:34

5

try with this:

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

hope this is helpful for you

answered Apr 13 '12 at 09:34

Rony SP

2,618
15
16

score 4 · Answer 2 · answered Mar 25 '13 at 13:58

4

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

or

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

or

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

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

answered Mar 25 '13 at 13:58

Jonathan Joosten

1,499
12
12

Your first suggestion wont work since speed is the first argument, but this seems to be the most correct solution here. – Andrew Magill Apr 05 '13 at 18:10

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

IE8 does'nt apply opacity to elements withoute a layout. See this answer Opacity CSS not working in IE8

edited May 23 '17 at 10:27

Community

1
1

answered Apr 13 '12 at 09:23

Naigel

9,086
16
65
106

score 0 · Answer 4 · edited May 23 '17 at 12:15

jQuery handles setting the opacity in an IE ≥ 6 compatible way for you, both when using the css("opacity", value) and fade*() methods. But be sure to use the jQuery 1.x library which is compatible with IE 6, 7 and 8 as opposed to jQuery 2.x which is not (both are IE ≥ 9 compatible).

Here are the examples of using css("opacity", value) and 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

However, there are issues in IE ≤ 8 related to opacity of semi-transparent PNGs: How to solve/hack fading semi-transparent PNG bug in IE8?

score -1 · Answer 5 · answered Apr 13 '12 at 09:21

-1

Try this

filter: alpha(opacity=50);

instead of

opacity:0.5;

answered Apr 13 '12 at 09:21

Priyank Patel

6,898
11
58
88

jQuery applying css opacity

5 Answers5

Linked