jquery - Chrome 中 jquery fadeIn() 的末尾有 'bump'

Question

我在 Chrome 中使用非常简单的淡入和淡出。我只希望一个文本元素淡出，另一个文本元素淡入。工作示例: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 beta(目前最新)

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

Answer 1

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