[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=859573001-31102006><FONT face=Arial
color=#0000ff size=2>p.s. <A
href="http://www.visualjquery.com">www.visualjquery.com</A> is REALLY useful.
Thanks for your work!</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 5:18 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>You could try setting the element to opacity 0, then make it inline,
then fade it in. Might work.<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 dir=ltr align=left><SPAN><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><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN><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><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff
size=2>Thanks!</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN><FONT face=Arial color=#0000ff
size=2>Chris.</FONT></SPAN></DIV><BR>
<DIV lang=en-us dir=ltr align=left>
<HR>
<FONT face=Tahoma size=2><B>From:</B> <A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com</A> [mailto:<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com</A>] <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><SPAN class=q>
<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 onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:cparker@swatgear.com" target=_blank>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" target=_blank>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
</SPAN></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/