从外部加载时jQuery淡入IE Png问题

StackOverflow https://stackoverflow.com/questions/1808015

题

我正在使用jQuery中的加载内容方法将我域中的外部html文件中的数据加载到我的网页上的div中。我把div从新页面中删除，同时将div隐藏在当前页面中，将其淡出并淡出新的。在这两个div中都有一个png图像，它在IE中创建可怕的黑色blob，工作正常在其他浏览器中，但由于IE无法处理多个过滤器而导致混乱。

我尝试使用单元png修复无效，有没有人有任何修复或想法来帮助我保持我的png在这个过渡期间看起来不错？

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

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

有帮助吗？

解决方案

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

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

如果你在文字或动态内容面前褪色，那么你无能为力。

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

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

其他提示

我有一个类似的问题，即使用透明的png-background淡化元素。经过一些研究后，我找到了这个页面，最后你会找到一个解决方案，这对我有所帮助：

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

我遇到了类似的问题。我需要根据用户输入将几个透明PNG中的一个加载到我的页面中，并让它淡入。我最终使用了Drew Diller的Belated PNG修复程序（用于IE6）。在文档准备中调用当然不适用于动态内容，所以这是我的脚本的样子：

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

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

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

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

  1. 将透明PNG应用于包装元素
  2. 将淡入淡出应用于包装器内的元素。这似乎也迫使包装元素显示出来。
  3. 隐藏包装器元素，使用jQuery fade显示内容元素

    4. 例如：

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

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

例如：

js file：

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

css文件：

#style
{
    margin:0;
    background:transparent;
    float:left;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top