Using Jquery to shift reorder list item
<p>I'm a bit stumped. I have an unordered list with 5 items. The 3rd item is styled to appear larger than the others.</p>

<p>When clicking on an item, I would like that item to animate into the middle position (like a carousel), and for the remaining list items to shift up or down accordingly.</p>

<p><img src="http://i.stack.imgur.com/QRFGt.png" alt="enter image description here"></p>

<pre><code>&lt;ul&gt;
   &lt;li&gt;one&lt;/li&gt;
   &lt;li&gt;two&lt;/li&gt;
   &lt;li class="bigOne"&gt;three&lt;/li&gt;
   &lt;li&gt;four&lt;/li&gt;
   &lt;li&gt;five&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>So if I clicked on the fifth item - the list would become:</p>

<pre><code>&lt;ul&gt;
   &lt;li&gt;three&lt;/li&gt;
   &lt;li&gt;four&lt;/li&gt;
   &lt;li class="bigOne"&gt;five&lt;/li&gt;
   &lt;li&gt;one&lt;/li&gt;
   &lt;li&gt;two&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And if clicking on the 2nd item the list would become:</p>

<pre><code>&lt;ul&gt;
   &lt;li&gt;five&lt;/li&gt;
   &lt;li&gt;one&lt;/li&gt;
   &lt;li class="bigOne"&gt;two&lt;/li&gt;
   &lt;li&gt;three&lt;/li&gt;
   &lt;li&gt;four&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I've been able to shift the item into the third position - however, I can't quite figure out how to shift all the other items up and animate them into position. I've spent hours messing about with various bits of code over the weekend - but cant get it working.</p>

<p>Here is a link to JS fiddle:</p>

<p><a href="http://jsfiddle.net/cadud/" rel="nofollow">http://jsfiddle.net/cadud/</a></p>

<p>As you can see - I'm getting a weird bunching at the start 1, 1 and no class is added to the middle (3rd) element.</p>
