jquery - 对表格行高调整大小的动画slideUp

在表格行中显示或隐藏一些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();
});

最佳答案

弄清楚了。我想我的代码按原样工作，所以我要做的就是将.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();
});