Ways of determining the position of an element on a page using Jquery
<p>I am using <code>offset()</code> to get the current position of an image just after a UL.  I am positing the image absolutely so that it hangs off the first li as a pointer.  When any li is clicked i want the image to slide to that particular li.</p>

<p>The first time i click on a li it slides to the centre of the page.  But then when i make subsequent clicks it moves the proper distance, only in the centre of the page because its already been set incorrectly. </p>

<p>I hope this makes sense.</p>

<p>Here is my HTML</p>

<pre><code>&lt;ul id="llist"&gt;
    &lt;li class="t current"&gt;&lt;a href="#"&gt;&lt;span&gt;solutions&lt;/span&gt;&lt;/a&gt;&lt;img src="images/bg-tab-leader-arrow.png" width="24" height="53" title="pointer" class="pointer" /&gt;&lt;/li&gt;
    &lt;li class="m"&gt;&lt;a href="#"&gt;&lt;span&gt;credit mangement solutions&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li class="b"&gt;&lt;a href="#"&gt;&lt;span&gt;third party additions&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>and my JS to date (which also nicely fades out tabs)</p>

<pre><code>$('#llist li').click(function() {
    var thisTop = $(this).offset().top;
    $('.pointer').animate( {'top': thisTop} );
    return false;
});
</code></pre>

<p>CSS:</p>

<pre><code>#subheader { position:relative; }
#subheader #llist { float:left; width:286px; margin:0 0 18px 0; padding:0; list-style:none; }
#subheader #llist li { color:#005474; line-height:68px; height:70px; background:url(../images/bg-tab-leader.png) no-repeat; position:relative; }
#subheader .pointer { z-index:1000; position:absolute; top:9px; right:-22px; }
</code></pre>

<p>Any ideas on why this positions itself in the centre of the page when i first click instead of just sliding it to the relative LI would be greatly appreciated.  </p>
