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

Question

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

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

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

我有一个示例页面。我还遇到了一些其他问题：

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

Answer 1

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

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