jQuery fadeIn（）；“小故障”；或；“突然开关”；在多个浏览器中

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

JavaScript:

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

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

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

禁用IE的过滤器（即使问题不是特定于IE）

向正在设置动画的元素添加背景

将-webkit字体平滑设置为抗锯齿（无明显效果）

尝试了fadeTo（0.99），它仅以与原始字体不相似的未知字体或粗体字体挂起文本

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

---

jsFiddle:

我发现了一种似乎效果很好的解决方法。然而，它并没有解决导致“小故障”的fadeIn（）的根本问题，但它提供了一个替代方案，我决定在有人能够解决原始问题之前实施该方案

基本上，我应用了一个图像覆盖，该图像与需要使用z-index属性淡入的元素顶部的背景相匹配。因此，我没有让文本淡入，而是让具有更高z索引的图像ImplementFadeout（）来显示底层文本。见下文：

#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);

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

---

同样，我不认为这是一个理想的解决方案，但它可以实现相同的结果。

如果它发生在多个浏览器中，则可能不是一个。。无论如何，发布一个最小的测试用例（在这里和JSFIDLE中完成最小的代码）…您是否打开了ClearType？如果您切换它会发生什么？请创建一个JSFIDLE来说明问题（我们也需要查看您的CSS/HTML）。旧版本的IE因某些文本字体的不透明度褪色而臭名昭著。在某些情况下，选择不同的字体会使问题消失。但是，我从未在Chrome上看到过这个问题，所以我们需要在JSFIDLE中看到它。@jfriend00。出于保密原因，我重命名了变量和id，并省略了一些内容。据我所知，依赖性是令人满意的。我所说的JSFIDLE，指的是能够实际工作并说明您所问问题的东西。我不知道如何让您的JSFIDLE实际执行任何操作。页面的所有内容都被隐藏，代码调用不存在的函数。这并不能说明问题所在。我想说，这种变通方法是目前实现您期望的最终结果的最好、最可靠的方法。很高兴你解决了。