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

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上的文档。