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