0

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

JavaScript：

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

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

我做了很多研究并尝试了多种解决方案：

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

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

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

4

1 回答 1

2

我发现了一种似乎效果很好的解决方法。然而，它并没有解决导致“故障”的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);

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

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

于 2013-01-24T19:52:37.240 回答