用于隐藏表格中的单元格并重新调整行中剩余单元格的动画。

Question

我有一个100％宽度和三个单元格的表格。

当我按下按钮时，一个单元格被隐藏，并且表格布局相应地进行调整。

我目前使用.hide（）jquery方法为隐藏设置动画。

HTML

<table style="border-color:red;width:100%"> 
    <tr> 
     <td> 
      <table><tr><td><div>stuff 1 blah blah blah</div></td></tr></table> 
     </td> 
     <td> 
      <table><tr><td><div>stuff 2 blah blah blah</div></td></tr></table> 
     </td> 
     <td id="tdStuff"> 
      <table><tr><td><div>stuff 3 blah blah blah</div></td></tr></table>   
     </td> 
    </tr> 
</table> 
<button id="btnHide" onclick="hideStuff()" >Hide</button> 

使用Javascript/jQuery的

function hideStuff(){ 
    $('#tdStuff').hide('slow'); 
} 

但问题是，即使它在第一次顺利调整，在单元格中的文本被压扁了。而且，如果在任何地方都有一个固定的宽度，它就会停止调整并简单地跳转。

有没有一种方法可以让动画顺利地发生，方法是展开行中剩余的单元格以适应表格的宽度。

相关jsfiddle

Answer 1

是，jQuery有此功能，请尝试以下调整：

$('#tdStuff3').hide('slow');

有关更多信息，请参见hide的文档。