title: Using Jquery to shift reorder list item
body: <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="https://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 noreferrer">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>