表格行高度上的动画幻灯片大小调整大小

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();
});