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中有'凹凸'

回答

相關問題