从外部加载时 jQuery fadeIn IE Png 问题

Question

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

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

i46.tinypic.com/t9dtvr.jpg 这是问题的屏幕截图，欢呼声

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

Answer 1

没有任何 100% 的解决方案。如果 PNG 中有半透明区域，则应用的任何滤镜都会使这些区域完全不透明。我见过的大多数淡入淡出过渡都会在淡入淡出过程中应用滤镜，然后再删除滤镜。这意味着当图像淡入时您将看到锯齿区域，但在过渡结束时看起来会很好。

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

如果您在文本或动态内容前逐渐消失，则您无能为力。

---

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

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

Answer 2

我在淡入具有透明 png 背景的元素时遇到了类似的问题。经过一番研究，我找到了这个页面，最后你会找到一个解决方案，这对我有帮助：

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

用户 dan.tello 在 IE 中使用了附加过滤器 (CSS)：

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

Answer 3

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

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

Answer 4

我也有类似的问题。我需要根据用户输入将几个透明 PNG 之一加载到我的页面中，并使其淡入。我最终使用了 Drew Diller 的迟来的 PNG 修复（适用于 IE6）。当然，在文档就绪时调用不适用于动态内容，因此我的脚本如下所示：

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

它在 IE7 中运行良好，但我还没有测试 IE8。

Answer 5

您可以为 png 图像（或褪色的元素）指定除透明之外的 background-color 值吗？这主要是有帮助的。

Answer 6

@jdln - 我不确定这是否是她想要的并解释错误，或者这是另一个解决方案，但这对我有用：

1. 将透明PNG应用到包装元素
2. 将淡入淡出应用到内部元素包装纸。这似乎也强制显示包装元素。
3. 隐藏包装元素，使用 jQuery fade 显示内容元素

例如：

/* 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();

我使用 .hide() 来确保效果每次都从头开始，因为我从悬停事件中调用它。
希望这有帮助！

Answer 7

您所要做的就是使元素周围的包装器（样式）（#outer（有背景png））将js文件中的不透明度淡化为1.0。效果很好！

例如：

js 文件：

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

css 文件：

#style
{
    margin:0;
    background:transparent;
    float:left;
}