使用jquery向上或向下滑动整个HTML表格不起作用

Question

我一直在寻找解决方案,但我找不到它.我甚至从SO尝试过这个,div会滑落,但它不会滑动

基本上我在slideUp()桌面上使用from jquery但它没有向上滑动,而是只是消失了.

我已经float: none在桌子上完成了,添加position: relative到父元素.但它仍然没有显示滑动效果.

jQuery的:

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

HTML:

<div id="main">

 <ul>
  <li><label>Scratch-off Panel</label><input type="text" id="scratch-panel" /></li> 
  <li><label>Serial Number</label><input class="field-small" type="text" id="serial-num" /></li>
  <!--<li><button class="but-sec" id="voucher-btn" type="submit" title="Apply">Apply</button></li>-->
  <li><input class="but-sec" type="submit" id="voucher-btn" value="Apply" /></li>
 </ul>

 <table id="voucher-list">
  <thead>
    <tr>
      <th width="200px">$Value One</th><th>$Value Two</th><th>$Value Three</th><th>$Value Four</th>
    </tr>
  </thead>
  <tbody>
    <td>MSFRGFCHGGKJVJ1234</td><td>12345678</td><td>£156678</td><td>Remove</td>
  </tbody>
 </table>

</div>

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

Answer 1

表很挑剔,你应该避免直接在桌子上使用效果.什么工作是在你的桌子周围包裹div并将效果应用于它.

您对表的控制与对其他元素的控制不同.这就是为什么在动画过程中,blindUp无法改变表格的高度.

这是一个例子:http: //jsfiddle.net/BQTGF/