[jQuery] fadeIn() causes change in page layout

[jQuery] fadeIn() causes change in page layout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY>
<DIV dir=ltr align=left><SPAN class=893104800-31102006><FONT face=Arial
color=#0000ff size=2>This works except that it has the unfortunate effect of
moving things after they've faded. Which makes complete sense but is almost
useless since the elements visual render one way and then the
other.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=893104800-31102006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=893104800-31102006><FONT face=Arial
color=#0000ff size=2>Is this something that can be "fixed" in jQuery or does my
design just need to take this into account?</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=893104800-31102006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=893104800-31102006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=893104800-31102006><FONT face=Arial
color=#0000ff size=2>Thanks!</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=893104800-31102006><FONT face=Arial
color=#0000ff size=2>Chris.</FONT></SPAN></DIV><BR>
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <B>On Behalf Of </B>Yehuda
Katz<BR><B>Sent:</B> Monday, October 30, 2006 4:36 PM<BR><B>To:</B> jQuery
Discussion.<BR><B>Subject:</B> Re: [jQuery] fadeIn() causes change in page
layout<BR></FONT><BR></DIV>
<DIV></DIV>Some jQuery animations convert stuff to block-level. If you want to
avoid that effect, you can apply a callback that converts back to
inline.<BR><BR>$(expr).fadeIn(500, function() { $(this).css("display", "inline")
}) <BR><BR>-- Yehuda<BR><BR>
<DIV><SPAN class=gmail_quote>On 10/30/06, <B class=gmail_sendername>Chris W.
Parker</B> <<A
href="mailto:cparker@swatgear.com">cparker@swatgear.com</A>> wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">
<DIV>
<DIV><SPAN><FONT face=Arial size=2>Hello,</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial size=2>I'm just beginning to play with jQuery and
as well I'm a novice with js.</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial size=2>I'm just doing some VERY simple tests right
now and I ran into some unexpected behavior.</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial size=2>The following HTML will render on the same
line in your browser:</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial size=2><a class="one"
href="...">...</a></FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial size=2><a class="two"
href="...">...</a></FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial size=2>But when I apply fadeIn() to either of
those elements they (appear to) turn into block elements thus rendering
them on separate lines.</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial size=2>Is this to be expected?</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial size=2>Thanks,</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial
size=2>Chris.</FONT></SPAN></DIV></DIV><BR>_______________________________________________<BR>jQuery
mailing list<BR><A onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com">discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A><BR><BR><BR></BLOCKQUOTE></DIV><BR><BR
clear=all><BR>-- <BR>Yehuda Katz<BR>Web Developer | Wycats
Designs<BR>(ph)  718.877.1325 </BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/