javascript - 动画隐藏表格中的单元格并重新调整行中剩余单元格的大小。

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');

有关更多信息，请参阅有关隐藏的文档。