title: Swap div position with animation
body: <p>How to swap div position when clicked <strong>only with the first div in stack</strong>. So when div 2 or 3 is clicked it will swap with the first child of 
  parent in DOM and when the first child of parent in DOM is clicked nothing should happen.</p>
  
  <p>This is my fiddle: <a href="http://jsfiddle.net/exc5m046/" rel="nofollow noreferrer">http://jsfiddle.net/exc5m046/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="one" class="move"&gt;div 1&lt;/div&gt;
      &lt;div id="two" class="move"&gt;div 2&lt;/div&gt;
      &lt;div id="three" class="move"&gt;div 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>#container {
      width: 200px;
      color:#fff;
      position: relative;
      text-align:center;
  }
  #container div {
      position: relative;
      margin:10px;
      background:#ff00ab;
      padding:5px;
      border-radius:3px;
      text-align:center;
      display:inline-block;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre class="lang-jquery prettyprint-override"><code>var animating = false;
  
  $('#container').on('click', '.move', function () {
  
      var clickedDiv = $(this).closest('div'),
  
      prevDiv = clickedDiv.prev(),
      distance = clickedDiv.offset().left - prevDiv.offset().left;
  
      if (prevDiv.length) {
          animating = true;
          $.when(clickedDiv.animate({
             left: -distance
          }, 2000),
          prevDiv.animate({
              left: distance
          }, 2000)).done(function () {
              prevDiv.css('left', '0px');
              clickedDiv.css('left', '0px');
              clickedDiv.insertBefore(prevDiv);
              animating = false;
          });
      }
  });
  </code></pre>