jquery结束fadeIn（）在Chrome中有'凹凸'

我在Chrome中使用了一个非常简单的fadeIn和fadeOut。我只想要一个文本元素淡出，另一个淡入。工作示例：http://jsfiddle.net/forgetcolor/7eR5Q/jquery结束fadeIn（）在Chrome中有'凹凸'

我遇到的问题是在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>

UPDATE：

这里有一个视频：http://www.youtube.com/watch?v=n2IGED0pkVg

我的Chrome版本号是OSX

20.0.1132.21β（最新现在）

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

来源

2012-06-01 mix

它在我的Chrome中完美运行。 – VisioN

有趣。我在OSX上。您？ – mix

在我的Chrome OSX上工作 – dSquared

如果我继续和关闭的webkit字体平滑，则溶解的伟大工程： http://jsfiddle.net/7eR5Q/19/ 所以apparantly它在过渡期间消除平滑而导致“撞”

来源

2012-06-01 21:35:33 box86rowh

那么这会使它成为一个铬错误或一个OSX错误？并有任何解决方法（除去字体平滑）？ – mix

webkit字体平滑特定于基于webkit的osx浏览器。如果我们将属性更改为antialiased：http://jsfiddle.net/7eR5Q/20/它看起来不错，并且动画仍然流畅 – box86rowh

不错，我会将你的小提琴添加到bug报告中 – mix

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

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

对我来说似乎有点多了。

来源

2012-06-01 20:14:11

600仍然有我看到的颠簸。 – mix

这似乎是MacBook上的字体平滑渲染窃听。这是一个question from stackoverflow它。

编辑：你可以改善你的字体与字体在抗锯齿（spec）模式的平滑渲染。这里是an article为什么你不应该使用它。

-webkit-font-smoothing: antialiased;

来源

2012-06-01 20:59:24 mrzmyr

那么为什么只在一些浏览器上而不是其他的？ – mix

这是一个古老的问题。 –

之后将其添加

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

-webkit-opacity: .99;

来源

2013-08-07 03:23:05 Josh

jquery结束fadeIn（）在Chrome中有'凹凸'

回答

相关问题