Ende von JQuery FadeIn () hat eine "Beule" in Chrome

Ich verwende ein sehr einfaches FadeIn und FadeOut in Chrome. Ich möchte nur, dass ein Textelement ausgeblendet und ein anderes eingeblendet wird. Arbeitsbeispiel:http://jsfiddle.net/forgetcolor/7eR5Q/

Das Problem, das ich habe, ist, dass es am Ende von fadeIn () einen abrupten Übergang zum Endzustand gibt. Ich nenne es eine "Beule". Das Element wird gleichmäßig eingeblendet, verliert jedoch am Ende diese Glätte und beendet die Überblendung auf einmal.

Gibt es eine Möglichkeit, dies zu vermeiden?

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>​

AKTUALISIEREN:

Hier ist ein Video:http://www.youtube.com/watch?v=n2IGED0pkVg

Meine Chrome-Versionsnummer ist 20.0.1132.21 Beta (aktuell) unter OSX

Chrome-Fehlerbericht eingereicht:https://code.google.com/p/chromium/issues/detail?id=130801

Antworten auf die Frage(4)

Ihre Antwort auf die Frage