多个浏览器中的 jQuery fadeIn() “故障”或“突然切换”答案

【问题标题】：jQuery fadeIn() "glitch" or "sudden switch" in multiple browsers多个浏览器中的 jQuery fadeIn() “故障”或“突然切换”
【发布时间】：2013-01-25 03:52:37
【问题描述】：

我正在对最初隐藏的 div 中的特定元素调用简单的 fadeIn()。

JavaScript：

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

问题在于，在淡入淡出动画的持续时间内，渲染会使文本显得更粗或以不同的字体显示。动画完成后，它会恢复为原始字体/字体粗细，因此会出现“故障”或“突然切换”。我在 Chrome 和 IE 8 中都遇到过这个问题，并且在实现将不透明度从 0 设置为 100 的 animate(opacity) 方法时（基本上与fadeIn() 的效果相同）。

我进行了大量研究并尝试了多种解决方案：

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

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

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

【问题讨论】：

如果它发生在多个浏览器中，它可能不是 .. 无论如何，发布一个 minimal 测试用例（完整的最小代码在这里和一个jsfiddle）..
您是否开启了 ClearType？如果你切换它会发生什么？
请创建一个 jsFiddle 来说明问题（我们也需要查看您的 CSS/HTML）。旧版本的 IE 因某些文本字体的难看不透明度褪色而臭名昭著。在某些情况下，选择不同的字体会使问题消失。但是，我从未在 Chrome 上看到过这个问题，所以我们需要在 jsFiddle 中看到它。
@jfriend00 jsFiddle link。出于保密原因，我重命名了变量和 ID，并省略了一些内容。据我所知，依赖性很满意。
通过 jsFiddle，我的意思是实际有效并说明了您所询问的问题。我不知道如何让你的 jsFiddle 真正做任何事情。页面的所有内容都被隐藏，代码调用了不存在的函数。这并不能说明问题。

标签： jquery fonts opacity fadein

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

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

同样，我不认为这是理想的解决方案，但可以达到相同的结果。

【讨论】：

我会说这种解决方法是目前实现所需最终结果的最佳、最可靠的方法。很高兴你解决了。