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