jquery fadeIn() 的结束在 Chrome 中有一个'bump'

Question

我在Chrome中使用了一个非常简单的fadeIn和fadeOut。 我只希望一个文本元素淡出，另一个淡入。 工作示例：http://jsfiddle.net/forgetcolor/7eR5Q/

我遇到的问题是，在 fadeIn（） 结束时，会突然过渡到结束状态。 我称之为"颠簸"。 元素平滑地淡入，但就在最后，它失去了平滑度并立即完成了淡入淡出。

有没有办法避免这种情况？

var cur = 1;
$('#btn').click(function() {
    if (cur == 1) {
        $('#txt1').fadeOut(500, function() {
            $('#txt2').fadeIn(500);
        });
        cur = 2;
    } else if (cur == 2) {
        $('#txt2').fadeOut(500, function() {
            $('#txt1').fadeIn(500);
        });
        cur = 1;
    }
});​
body {
    background-color:#666;
    color:white;
    font-size:20px;
    margin:20px;
}
#txt2 {display:none;}​
<div id="txt1">txt1</div>
<div id="txt2">txt2</div>
<br/><div id="btn">btn</div>​

更新：

这是一段视频：http://www.youtube.com/watch?v=n2IGED0pkVg

我的Chrome版本号是OSX上的20.0.1132.21测试版（目前最新）

已提交 Chrome 错误报告：https://code.google.com/p/chromium/issues/detail?id=130801

Answer 1

如果我继续关闭 webkit 字体平滑，溶解效果很好：http://jsfiddle.net/7eR5Q/19/因此，它显然删除了过渡期间的平滑，并在引起"颠簸"后添加它

Answer 2

如果您觉得淡入发生得太快，请将时间增加到 600，

$('#txt1').fadeIn(600); and $('#txt2').fadeIn(600);

对我来说似乎更均匀一些。

Answer 3

这似乎是Macbook上的字体平滑渲染错误。这是来自堆栈溢出的问题。

编辑：您可以在抗锯齿（规范）模式下使用字体平滑来改善字体渲染。这是一篇为什么你不应该使用它的文章。

-webkit-font-smoothing: antialiased;

Answer 4

对于将来遇到此问题的用户，我发现此解决方案对我有用。

-webkit-opacity: .99;