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

Posted 2023-05-08

【中文标题】如何避免在 jQuery 动画 [fadeIn() 或 animate()] 结束时出现文本闪烁？

【英文标题】：How can I avoid text flickering at the very end of a jQuery animation [ fadeIn( ) or animate( ) ]?

【发布时间】：2012-07-31 00:29:20

【问题描述】：

在使用 jQuery 时，如何避免在动画 [fadeIn( ) 或 animate( ) ] 结束时出现文本闪烁？这似乎只发生在

找出问题所在：http://jsfiddle.net/HV7Az/8/

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

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

【参考方案1】：

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

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

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