title: Sliding up or down an entire HTML table using jquery, doesn't work
body: <p>I've been looking for a solution but I couldn't find it. I even tried this from SO, <a href="https://stackoverflow.com/questions/1750773/div-will-slidedown-but-it-wont-slideup">div will slidedown but it wont slideup</a></p>
  
  <p>Basically I'm using the <code>slideUp()</code> from jquery on a table but it doesn't slide up, instead it just dissappear.</p>
  
  <p>I've done the <code>float: none</code> on the table, add <code>position: relative</code> to the parent element. But it still doesn't show the sliding effect.</p>
  
  <p>jquery:</p>
  
  <pre><code>$('#voucher-btn').click(function(e){
      $('#voucher-list').slideUp(400);
      e.preventDefault();
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="main"&gt;
  
   &lt;ul&gt;
    &lt;li&gt;&lt;label&gt;Scratch-off Panel&lt;/label&gt;&lt;input type="text" id="scratch-panel" /&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;label&gt;Serial Number&lt;/label&gt;&lt;input class="field-small" type="text" id="serial-num" /&gt;&lt;/li&gt;
    &lt;!--&lt;li&gt;&lt;button class="but-sec" id="voucher-btn" type="submit" title="Apply"&gt;Apply&lt;/button&gt;&lt;/li&gt;--&gt;
    &lt;li&gt;&lt;input class="but-sec" type="submit" id="voucher-btn" value="Apply" /&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
   &lt;table id="voucher-list"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th width="200px"&gt;$Value One&lt;/th&gt;&lt;th&gt;$Value Two&lt;/th&gt;&lt;th&gt;$Value Three&lt;/th&gt;&lt;th&gt;$Value Four&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;td&gt;MSFRGFCHGGKJVJ1234&lt;/td&gt;&lt;td&gt;12345678&lt;/td&gt;&lt;td&gt;£156678&lt;/td&gt;&lt;td&gt;Remove&lt;/td&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main{
   width: 700px;
   margin: 20px auto;
   position: relative;
  }
  
  #voucher-list{
   border-collapse: collapse;
   float: none;
   position: relative;
  }
  
  #voucher-list td, th{
   border: 1px solid #ccc;
   padding: 5px;
   text-align: left;
  }
  
  li{
   list-style: none;
   overflow: hidden;
   margin: 0 0 10px 0;
  }
  
  input[type="text"]{
   float: left;
   height: 20px;
   border: 1px solid #ccc;
  }
  
  label{
   float: left;
   width: 120px;
  }
  </code></pre>