title: slide elements after using remove
body: <p>Say I had a bunch of boxes tiled up on the screen:</p>
  
  <blockquote>
    <p>[1] [2] [3]<br>
    [4] [5] [6]<br>
    [7] [8] [9]</p>
  </blockquote>
  
  <p>each box representing a div.  If I were to use jquery's <code>.remove()</code> on one of those divs, how do I make the boxes that come after it slide?  </p>
  
  <p>For example, if I removed <code>box 5</code>, I would want <code>box 6</code> to slide to <code>box 5</code>'s place, <code>box 7</code> to slide up to <code>box 6</code>'s place, and so on.  </p>
  
  <p>Currently when I remove a box, the boxes just instantly goes to the desired position. I tried a css3 transition property on them, but it didn't work for some reason.</p>
  
  <p>JS:</p>
  
  <pre><code>$(this).parent().parent().parent().remove(); //this will remove the desired box
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.left-col-box {
    position: relative;
    float: left;
    width: 218px;
    height: 218px;
    margin-left: 20px;
    margin-top: 20px;
  
   -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="left-col-box"&gt;
    &lt;div class="left-col-box-header"&gt;
      &lt;?php echo $rows[1]; ?&gt;
    &lt;/div&gt;
    &lt;img src="includes/thumber.php?file=../img/&lt;?php echo $rows2[0]. '.'.$rows2[1];?&gt;&amp;width=217&amp;height=217" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please excuse the php.  Thanks!  Basically the HTML and the CSS makes a box.  And I use php to generate x amount of boxes.  If I were to delete one, I'd like them to slide in their desired position.</p>