动画不透明度在 IE 或 Opera 中不起作用答案

【问题标题】：Animating opacity doesn't work in IE or Opera动画不透明度在 IE 或 Opera 中不起作用
【发布时间】：2010-01-04 21:37:40
【问题描述】：

我正在尝试使用 jQuery 插件。我有这段代码可以淡入“灯箱”：

$('#cleverbox')
    .css({ opacity:0, visibility:'visible' })
    .animate( {opacity:1}, 2000 );

它在 Firefox 和 Chrome 上运行良好，但在 IE（7 和 8）和 Opera 中，元素只是出现而不是淡入。在 SO 上有很多类似的问题，但我还没有找到可行的解决方案.

我有一个example page。我还有一些其他问题：

在 Internet Explorer（7 和 8）中，第一个缩略图永远不会显示灯箱（onload 事件永远不会触发）。
在 IE7 中，修复 ClearType 错误的代码不起作用。 $(this).css( 'opacity', '' ) 应该删除不透明样式（在本例中为“过滤器”属性），但不会删除它。在 IE 的开发工具中它仍然有style="filter: ;"
在 Opera 中，它在加载一次后就不再运行。换句话说，如果图像在浏览器缓存中，onload 事件永远不会触发。

【问题讨论】：

你可能已经知道的事情：IE 不支持 CSS opacity； Opera 可能会将其隐藏在自定义前缀后面，因为 CSS 不透明度仍在 CSS3 草案中，而不是最终规范。我不知道 JQuery 是否试图模仿这些。如果通过 DX 过滤器设置了不透明度，IE 将禁用 ClearType。
jQuery 克服了这样的跨浏览器兼容性（这是使用它的主要原因之一） - Opera 很好地支持不透明度，并且在 IE 中使用 filter 属性。至于 ClearType，上面的代码是为了修复这个 bug，它在 IE8 中做了，但不是 7。

【解决方案1】：

您是否尝试在' 中包装不透明度值，即$(something).animate({opacity:'1'});？每次都为我工作。

【讨论】：

【解决方案2】：

感谢 Opera 社区，我找到了 Opera 中的错误修复程序。我有这个：

var imgLoad = new Image();
imgLoad.src = linkUrl;
imgLoad.onload = function() {
    //do some stuff here
}

但是，如果图像在浏览器缓存中，它永远不会触发，因为加载部分在 onload 函数之前。解决方法是将src赋值移到onload函数下面：

var imgLoad = new Image();
imgLoad.onload = function() {
    //do some stuff here
}
imgLoad.src = linkUrl;

【讨论】：