final do jquery fadeIn () tem um 'bump' no Chrome

Estou usando um fadeIn e fadeOut muito simples no Chrome. Eu só quero um elemento de texto para desaparecer e outro para desaparecer. Exemplo de trabalho:http://jsfiddle.net/forgetcolor/7eR5Q/

O problema que estou tendo é que, no final do fadeIn (), há uma transição abrupta para o estado final. Eu chamo isso de 'colisão'. O elemento desaparece suavemente, mas logo no final perde essa suavidade e finaliza o fade de uma só vez.

Há alguma maneira de evitar isto?

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

ATUALIZAR:

Aqui está um vídeo:http://www.youtube.com/watch?v=n2IGED0pkVg

O número da minha versão do Chrome é 20.0.1132.21 beta (mais recente agora) no OSX

Relatório de bug do Chrome enviado:https://code.google.com/p/chromium/issues/detail?id=130801

questionAnswers(4)

yourAnswerToTheQuestion