Question

我在最初隐藏的div中的特定元素上调用一个简单的fadeIn（）。

JavaScript的：

$("#enclosingdiv").css({visibility: "visible"});
$("#element").fadeIn(1500);

问题在于，在淡入淡出动画的持续时间内，渲染会使文本看起来更大胆或使用不同的字体。动画完成后，它将恢复原始字体/字体重量，因此会出现“故障”或“突然切换”。我在Chrome和IE 8中都遇到过这个问题，同时也实现了动画（不透明度）方法，该方法将不透明度从0调整为100（与fadeIn（）的效果基本相同）。

我做了大量的研究并尝试了很多解决方案：

禁用IE的过滤器（即使问题不是IE特定的）。
为要动画的元素添加了背景。
将-webkit-font-smoothing设置为antialiased（没有明显效果）。
尝试了一个fadeTo（0.99），它只会暂停未知或粗体字体中与原始字体不相似的文字。

顺便说一句，我正在运行Windows XP。

jsFiddle：http://jsfiddle.net/2Txk7/34/

Answer 1

我发现了一种似乎运行良好的解决方法。然而，它没有解决fadeIn（）导致“故障”的根本问题，但它提供了一个替代方案，我决定实施，直到有人能够解决原始问题。

基本上，我使用z-index属性在需要淡化的元素顶部应用了与背景匹配的图像叠加。因此，我没有让文本淡入，而是让具有更高z-index的图像实现fadeOut（）以显示基础文本。见下文：

#background {
position: absolute;
background-image: url(../images/background.jpg);
width: 100%;
height: 100%;
z-index: 1;
}
#text {
position: absolute;
left: 300px;
top: 100px;
z-index: 2;
}

$("#background").fadeOut(1500);

与在文本上执行的相同功能相比，大多数浏览器似乎在处理图形的淡入淡出或不透明度方面做得更好。

同样，我不相信这是理想的解决方案，但会达到同样的效果。

jQuery fadeIn（）在多个浏览器中出现“故障”或“突然切换”

1 个答案: