jQuery Masonry and opacity in IE

Question

Hi,

I have found that if I am using jQuery masonry and also use jQuery to set the opacity of something, the opacity does not work in IE. The funny thing is that I have a div set to fadeIn, which also has an opacity value. The div IS translucent when fading in IE, but as soon as the fade has finished it just becomes solid. This is very strange and I cannot find a fix. Tried using an translucent PNG but these will not fade correctly in IE.

Thanks

Answer 1

This is a very common bug. It's a problem with IE, not jQuery. Fortunately, IE9 finally has true opacity support. Unfortunately, Butt-Loads of users are still using IE7 (and IE6!!).

I once built a super sweet jQuery interface with fading PNGs. The PNGs used levels of opacity to keep things looking nice. In IE the opacity pixels were solid black.

I've done a LOT of googling on the topic, and there's no workaround other than not fading a PNG with opacity.

Actaully, these fixes didn't work for me, but maybe they will for you:

http://blog.pengoworks.com/index.cfm/2009/2/17/Fading-a-24bit-transparent-PNG-in-IE7

Answer 2

Ok, so here is what I had to do. Set the opacity of the div using css with both opacity and filter (for corss-browser). The fadeIn the div (because it is hidden). Now in IE for some reason after fading the opacity will turn off, so you have to reset it using jQuery css opacity again, this is the code:

$('.project .blue').delay(300).fadeIn(800).css({"opacity":.3});

Quite simple, but it's always the last thing you think of.