[jQuery] Animate using relative %

[jQuery] Animate using relative %

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'>
<style>BODY{font:10pt Tahoma, Verdana, sans-serif;}</style>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 11"><meta name="Originator" content="Microsoft Word 11"><link rel="File-List" href="file:///C:%5CDOCUME%7E1%5CA8EF4%7E1.JES%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml"><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" LatentStyleCount="156">
</w:LatentStyles>
</xml><![endif]--><style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
span.EmailStyle15
{mso-style-type:personal;
mso-style-noshow:yes;
mso-ansi-font-size:10.0pt;
mso-bidi-font-size:10.0pt;
font-family:Arial;
mso-ascii-font-family:Arial;
mso-hansi-font-family:Arial;
mso-bidi-font-family:Arial;
color:windowtext;}
@page Section1
{size:595.3pt 841.9pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style>
<![endif]-->
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">Hi,<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">I am
working on a site where are wanting to create a full screen site using
percentages for positioning and displaying of content. As part of the project
we also want to have some animation to bring objects onto the page.<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">We have the
objects in their correct positions using relative positioning and negative top
values for example: <o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">#myDiv{ top:
-26%;}<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">This is
where we wish the animation to end with the block in position so therefore its
starting value in the CSS could be: <span style=""> </span>“top:
0%”.<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">Now I made
the assumption that my js to achieve this would be:<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">$(‘#myDiv’).animate({top
: “-26%”});<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">After
testing this, it became clear that the animate function was ignoring the ‘%’
sign and was just applying ‘-26px’ instead.<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">After
positing this directly to John Resig via twitter I got a response asking me to
try:<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">$(‘#myDiv’).animate({top
: “-=26%”});<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">However the
object always animates to: “top: 0px” regardless of its starting position,
percentage value and the +=, -= notation.<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">Is this a
bug or am I missing something here? – Using JQuery 1.3.2<o:p></o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;"><o:p> </o:p></span>
<p class="MsoNormal"><span style="font-size: 10pt; font-family: Arial;">Adam Jessop.<o:p></o:p></span>
</body></html>