Перемещение вверх или вниз по всей таблице HTML с помощью jquery, не работает

Я искал решение, но не мог не найду. Я даже пробовал это из SO, div будет скользить вниз, но не будет скользить вверх

В основном я использую slideUp () из jquery на столе, но он не скользит вверх, вместо этого просто исчезнуть.

Я сделал float: none для таблицы, добавил position: relative к родительскому элементу. Но он по-прежнему не показывает эффекта скольжения.

jquery:

$('#voucher-btn').click(function(e){
    $('#voucher-list').slideUp(400);
    e.preventDefault();
});

html:

 

  
Scratch-off Panel
 
  
Serial Number
  
  

 

 

  

    

      
$Value One
$Value Two
$Value Three
$Value Four
    
  
  

    
MSFRGFCHGGKJVJ1234
12345678
£156678
Remove
  
 

CSS:

#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;
}