1

幅が 100% でセルが 3 つのテーブルがあります。

ボタンを押すと、1 つのセルが非表示になり、それに応じてテーブルのレイアウトが調整されます。

現在、.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

4

1 に答える 1

2

はい、jQuery にはこのための機能があります。次の調整を試してください。

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

詳細については、非表示のドキュメントを参照してください。

于 2012-10-29T08:55:48.807 に答える