2

私はChromeで非常に単純なfadeInとfadeOutを使用しています。1 つのテキスト要素をフェードアウトさせ、別のテキスト要素をフェードインさせたいだけです。実際の例: 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

4

4 に答える 4

1

先に進んでWebkitフォントのスムージングをオフにすると、ディゾルブはうまく機能します:http: //jsfiddle.net/7eR5Q/19/ したがって、明らかに、移行中にスムージングが削除され、「バンプ」が発生した後に追加されます

于 2012-06-01T21:35:33.037 に答える
0

これに遭遇した将来のユーザーにとって、このソリューションがうまくいくことがわかりました。

-webkit-opacity: .99;
于 2013-08-07T03:23:05.913 に答える
0

Macbookのフォント スムーズ レンダリングの バグのようです。これはstackoverflowからの質問です。

編集:アンチエイリアス( spec ) モードでフォント スムージングを使用して、フォントのレンダリングを改善できます。そして、これが一般的に使用すべきではない理由の記事です。

-webkit-font-smoothing: antialiased;

于 2012-06-01T20:59:24.043 に答える
0

フェードインが速すぎると感じた場合は、時間を 600 まで増やしてください。

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

私にはもう少し均一に見えました。

于 2012-06-01T20:14:11.220 に答える