1

我正在使用 jQuery 中的加载内容方法将域内的外部 html 文件中的数据加载到网页上的 div 中。我将 div 从新页面中取出，同时通过淡出它并淡入新页面来隐藏当前页面中的 div。这两个 div 中都有一个 png 图像，它在 IE 中创建了可怕的黑色斑点，工作正常在其他浏览器中，但由于 IE 无法处理多个过滤器，因此变得一团糟。

我尝试使用单位 png 修复无济于事，有没有人有任何修复或想法来帮助我的 png 在此过渡期间看起来不错？

i46.tinypic.com/t9dtvr.jpg 这是问题的截图，干杯

还发现原始页面上的 png （在加载任何新内容之前）使用单位 png 修复完美地淡入和淡出，但加载的内容然后从外部文件退出则不会。我也向这些页面添加了修复程序，但这也不起作用。

4

7 回答 7

6

没有任何 100% 的解决方案可以解决这个问题。如果您有 PNG 的半透明区域，则应用的任何过滤器都会使这些区域完全不透明。我见过的大多数淡入淡出过渡都在淡入淡出期间应用过滤器，然后再移除过滤器。这意味着您将在图像淡入时看到混叠区域，但在过渡结束时看起来会很好。

另一种解决方案可用于静态页面部分：如果图像背后的背景是静态的，您可以从该背景创建图像并将其用作 img 标签的背景图像。然后，淡入淡出就可以了。如果 png 图像已经是元素的背景图像，则需要将其放入设置了不透明背景图像的容器中，然后将其淡化。

如果您在文本或动态内容面前淡出，您无能为力。

编辑：以下页面似乎有一个解决方案，涉及旧的 AlphaImageLoader 过滤器和带有不透明度过滤器集的父 div：

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

于 2009-11-27T11:02:03.940 回答
3

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; }
于 2012-10-09T12:05:14.630 回答
2

编辑：我来发布它是无望的，但实际上有些人描述了解决方法。看看这是否有帮助：

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

于 2009-11-27T11:54:49.480 回答
1

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.

于 2010-08-29T20:30:21.140 回答
0

你能给 png 图像（或褪色的元素）一个background-color透明以外的值吗？这主要是帮助。

于 2009-11-27T10:56:46.960 回答
0

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

于 2011-02-23T18:36:52.957 回答
-1

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;
}
于 2010-03-20T15:35:13.403 回答