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

请参阅 hide 上的文档获取更多信息。