0

テーブル行内の一部の div を表示または非表示にした後、高さ調整をアニメーション化するにはどうすればよいですか? 基本的に、ユーザーがラジオ グループで選択を行い、行の外に移動すると、フォームを要約するために他のラジオ オプションが非表示になります。その行にマウスを戻すと、すべてのラジオ オプションが再び表示されます。

単に消える [そして再び現れる] のではなく、テーブルの行がうまくスライドして新しい高さに調整されると、とても気に入ります。これが私のコードです：

ここにフィドルがあります。

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

1 に答える 1

0

理解した。私のコードはそのまま動作したと思うので、.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();
});
于 2012-12-10T21:08:54.740 に答える