在表格行高度調整動畫slideUp的大小

Question

如何在顯示或隱藏表格行內的某些div之後設置高度調整的動畫效果？基本上，在用戶在收音機組中進行選擇並懸停在該行之後後，其他收音機選項將被隱藏以濃縮表單。如果將鼠標移回該行，所有收音機選項將再次出現。

而不是隻是消失[和再現]，我真的很喜歡它，如果表格行很好地滑動適應新的高度。這裏是我的代碼：

HERE'S A FIDDLE.

<tr id="range"> 
    <td>Range</td> 
    <td> 
     <div class="formStrip"> 
      <input name="radioRange" type="radio" id="relativeDates" /> 
      <label for="relativeDates" class="rightSpacer">Relative Dates</label> 

      <label for="relativeStart">Start</label> 
      <input name="relativeStart" type="text" id="relativeStart" class="inputMarginFix" /> 

     </div> 
     <div class="formStrip"> 
      <input name="radioRange" type="radio" id="specificDates" /> 
      <label for="specificDates">Specific Dates</label> 
     </div> 
    </td> 
</tr> 

---

$("#formTable tr").mouseenter(function() { 
    $(this).find("input[type='radio']").parent().show(); 
}).mouseleave(function() { 
    $(this).find("input[type='radio']").not(":checked").parent().hide(); 
}); 

Answer 1

想通了。我猜我的代碼是按原樣工作的，所以我只需將.hide（）和.show（）更改爲.slideUp（）和.slideDown（）。

$("#formTable tr").mouseenter(function() { 
    $(this).find("input[type='radio']").parent().slideDown(); 
}).mouseleave(function() { 
    $(this).find("input[type='radio']").not(":checked").parent().slideUp(); 
});