jQuery fadeIn IE Png Issue when loading from exter

问题:

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.

回答1:

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

回答2:

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

回答3:

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

回答4:

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.

回答5:

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

回答6:

@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!

回答7:

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