jquery - 如何避免在 jQuery 动画 [fadeIn() 或 animate()] 结束时出现文本闪烁？

Question

使用 jQuery 时，如何避免在动画 [fadeIn() 或 animate()] 结束时出现文本闪烁？这似乎只发生在字体大小 < 40px 的情况下。

查看小提琴中的问题：http : //jsfiddle.net/HV7Az/8/

您会注意到，我发现的唯一解决方案是将不透明度设置为 99% 而不是 100%。这对我来说似乎是一个糟糕的解决方案。

我尝试过使用各种 HTML 格式，例如淡出父 div 而不是实际文本。

Answer 1

我还没有测试过这个跨浏览器，但是对于基于 webkit 的浏览器，我相信它与 GPU 加速有关。我通过添加以下内容来测试我的理论：

.animate-99, .animate-100 {
opacity: 0;
-webkit-font-smoothing: antialiased;
}

有了这个，我认为字体会被渲染和褪色，在你的 jsfiddle 中，当不透明度达到 100% 时会重新渲染它。这在 IE9/10/Gecko 浏览器中可能是也可能不是问题；您必须在那里进行测试，看看是否可以通过对文本进行抗锯齿来欺骗加速。