Slide an image by position using jquery
<p>I am trying to get the image to slide to its centre position on the respective li which is clicked.  So for example if i click number 2 in the list it will slide to number 2.  The issue is knowing where the user clicks next, how to figure the current position and which direction to slide.</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>Here is my jquery so far:</p>

<pre><code>$('#leader #llist li').click(function() { 
        $('.pointer').animate({'top':'+=61px'},1000,function() { 
            $(this).removeClass('current'); 
    });
    }, function() { 
        $('.pointer').animate({'top':'-=61px'},1000);   
        $(this).addClass('current');
    });
</code></pre>

<p>Any help would be appreciated.</p>
