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

I had a similar problem with fading in elements with a transparent png-background. After some research I found this page, where at the end you ll find a solution, that helped me:

http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome

The user dan.tello used additional filters (CSS) in IE:

.item img {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
  zoom: 1; }

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_thread/thread/1f693c5f4e8ea650/f3bc9685ccb40e70?pli=1 http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx

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.

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

@jdln -- I m not sure if this is what she was going for and explained it wrong, or if this is another solution, however this worked for me:

1. Apply the transparent PNG to a wrapper element
2. Apply your fade to an element INSIDE the wrapper. This seems to force the wrapper element to display as well.
3. Hide the wrapper element, show the content element using jQuery fade

For example:

/* HTML: */
<div id="wrapper">
    <div id="content">I use this for a drop-down menu with a transparent PNG shadow for lte IE8 browsers
    </div>
</div>

/* CSS */
#wrapper{margin-left:-9999px;}

/* jQuery */  
$( #content ).hide().fadeIn();

I use .hide() to make sure that the effect starts from the beginning every time, as I m calling this from a hover event. Hope this helped!

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;
}