[jQuery] Two problems with .fadeOut() / .fadeIn() effects.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Courier New, Courier, monospace">Hi folks,
I've got a span tag that contains the label for a section of my screen.
When the user clicks a checkbox, I'd like that text to fadeOut, change
to some different text, and then fadeIn again. Part of my problem is
that the text gets changed prior to the fade. The second part of my
problem is that once I apply the fade effect to the tag the text inside
the tag is messed up. The font isn't right. In fact, it doesn't look
like any font at all. It's just thicker and clunkier lookin', almost
like it's pixelated.
Here's my code:
function Foo(IsChecked){
if(IsChecked){
// my first thought was this... but it didn't really work
//$("#</font></font><font size="-1"><font
face="Courier New, Courier, monospace">MySpanLabel</font></font><font
size="-1"><font face="Courier New, Courier, monospace">").fadeOut("normal").empty().append("The
Changed Text").fadeIn("normal");
// my second thought was to break apart the pieces instead of
chaining them...
$("#</font></font><font size="-1"><font
face="Courier New, Courier, monospace">MySpanLabel</font></font><font
size="-1"><font face="Courier New, Courier, monospace">").fadeOut("normal");
$("#</font></font><font size="-1"><font
face="Courier New, Courier, monospace">MySpanLabel").</font></font><font
size="-1"><font face="Courier New, Courier, monospace">hide();
$("#</font></font><font size="-1"><font
face="Courier New, Courier, monospace">MySpanLabel").</font></font><font
size="-1"><font face="Courier New, Courier, monospace">empty().append("The
Changed Text"); // I dunno why I decided to chain these and not the
others.
$("#</font></font><font size="-1"><font
face="Courier New, Courier, monospace">MySpanLabel</font></font><font
size="-1"><font face="Courier New, Courier, monospace">").fadeIn("normal");
}
else{
// the point of this is to show the same effect, but the text
changes back to the original text
$("#</font></font><font size="-1"><font
face="Courier New, Courier, monospace">MySpanLabel</font></font><font
size="-1"><font face="Courier New, Courier, monospace">").fadeOut("slow").empty().append("Original
Text").fadeIn("slow");
}
}
<input type="checkbox" style="vertical-align:middle;"
onclick="Foo(this.checked);">
<span id="MySpanLabel" class="MyClass">Original Text</span>
</font></font>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/