用於隱藏表格中的單元格並重新調整行中剩餘單元格的動畫。

我有一個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

來源

2012-10-29 Urbycoz

一個簡單的谷歌搜索「hide（）動畫jquery」會給你MitchS給出的結果。只是說，在未來幫助你。不，我沒有downvote你的問題。 –

我沒有看到滿意的答案。當然，它起初會順利進行調整，但是單元格中的文本會被壓扁。而且，如果在任何地方都有一個固定的寬度，它就會停止調整並簡單地跳轉。 http://jsfiddle.net/hrMYL/12/ – Urbycoz

我已經重組了這個問題。看看你是否可以讓mod重新打開它。 –

是，jQuery有此功能，請嘗試以下調整：

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

有關更多信息，請參見hide的文檔。

來源

2012-10-29 08:55:48

用於隱藏表格中的單元格並重新調整行中剩餘單元格的動畫。

回答

相關問題