jQuery fadeIn IE Png Issue when loading from external

Question

I am loading data from external html files within my domain into a div on my webpage using a load content method in jQuery. I take the div out of the new page whilst hiding the div in the current page by fading this out and fading the new one in. There is a png image in both of these divs and it is creating horrid black blobs in IE, works fine in other browsers but due to IEs inability to process multiple filters its making a mess.

I tried using the unit png fix to no avail, does anyone have any fixes or ideas to help keep my pngs looking nice during this transition?

i46.tinypic.com/t9dtvr.jpg this is a screenshot of the problem, cheers

also discovered that the png that is on the page originaly (before loading anything new) fades in and out perfectly using the unit png fix but stuff loading in and then back out from external files doesnt. Ive added the fix to those pages too but that doesnt work either.

Answer 1

You have the solution with this:

http://allinthehead.com/retro/338/supersleight-jquery-plugin

Answer 2

Can you give the png image (or the element that is faded) a background-color value other than transparent? That mostly hels.

Answer 3

There isn't any 100% solution to the problem. If you have semi transparent areas of a PNG, any filters applied will render those areas fully opaque. Most fading transitions I've seen apply the filter during the fade, then remove the filter afterwards. This means you will see the aliased areas while the image fades in but it will look fine at the end of the transition.

Another solution can be used for parts of a page that are static: If the background behind the image is static you can create an image from that background and use it as the background image of your img tag. Then, fading in and out will work just fine. If the png image is already the background image of an element, you will need to put it in a container with the opaque background image set and fade that instead.

If you're fading in front of text or dynamic content, there's not much you can do.

---

EDIT: The following page seems to have a solution involving the old AlphaImageLoader filter and a parent div with the opacity filter set:

http://blog.mediaandme.be/?ref=17

Answer 4

EDIT: I came to post that it's hopeless, but there are actually some people describing work-arounds. See if this helps:

http://groups.google.com/group/jquery-dev/browse%5Fthread/thread/1f693c5f4e8ea650/f3bc9685ccb40e70?pli=1 http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx

Answer 5

all you have to do is make the wrapper(style) around the element(#outer(has background png)) fade the opacity to 1.0 in js file. works great!

ex:

js file:

$('#style').fadeIn('slow');

css file:

style{

margin:0;
background:transparent;
float:left;

}

Answer 6

I was having a similar problem. I needed to load one of several transparent PNGs into my page based on user input, and have it fade in. I ended up using Drew Diller's Belated PNG fix (intended for IE6). Calling at document ready doesn't work for dynamic content of course, so here's what my script looks like:

html = '<img src="selectedimage.png" />';
$('#overlay').html(html);
DD_belatedPNG.fix('#overlay img');
$('#overlay img').hide().fadeIn(1200);

It's working great in IE7, but I haven't tested IE8 yet.