2

我在 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

我在 OSX 上的 Chrome 版本号是 20.0.1132.21 beta（现在最新）

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

4

4 回答 4

1

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

于 2012-06-01T21:35:33.037 回答
0

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

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

对我来说似乎更甚。

于 2012-06-01T20:14:11.220 回答
0

这似乎是 Macbook 上字体平滑渲染 的问题。这是来自它的stackoverflow的一个问题。

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

-webkit-font-smoothing: antialiased;

于 2012-06-01T20:59:24.043 回答
0

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

-webkit-opacity: .99;
于 2013-08-07T03:23:05.913 回答