从外部加载时出现 jQuery fadeIn IE Png 问题答案

【问题标题】：jQuery fadeIn IE Png Issue when loading from external从外部加载时出现 jQuery fadeIn IE Png 问题
【发布时间】：2010-12-20 22:48:04
【问题描述】：

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

我尝试使用单位 png 修复无济于事，是否有人有任何修复或想法来帮助我的 png 在此过渡期间保持美观？

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

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

【问题讨论】：

您是在谈论 PNG 边缘的抗锯齿吗？
i46.tinypic.com/t9dtvr.jpg这是问题截图，干杯
还发现原始页面上的 png （在加载任何新内容之前）使用单位 png 修复完美地淡入和淡出，但加载的内容然后从外部文件中退出不会。我也为这些页面添加了修复程序，但这也不起作用。

标签： jquery internet-explorer png opacity

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案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; }

【讨论】：

【解决方案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

【讨论】：

【解决方案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。

【讨论】：

【解决方案5】：

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

【讨论】：

背景色不能设置，因为网站的背景需要透过它才能看到。
显式背景颜色存在相同问题：透明？

【解决方案6】：

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

将透明 PNG 应用于包装元素
将淡入淡出应用于包装器内的元素。这似乎也强制显示包装元素。
隐藏包装元素，使用 jQuery 淡化显示内容元素

例如：

/* 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() 来确保效果每次都从头开始，因为我是从悬停事件中调用它的。希望这有帮助！

【讨论】：

【解决方案7】：

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

例如：

js文件：

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

css 文件：

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

【讨论】：