jquery - 在表格行高调整大小时动画 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();
});