使用Jquery：隐藏子div后，如何优雅地调整父div的大小？

Question

使用Jquery：隐藏子div后，如何优雅地调整父div的大小？ 这段代码可根据需要隐藏Option1，但随后容器div SLAMS以震撼的方式关闭。 在Option1隐藏之后，是否可以将某些内容链接到末尾以适当地调整div的大小以适合新的大小？

HTML：

<div id="Container">
    <div id="Option1">
        Users can do things here
    </div>

    <div id="Option2">
        <input type="checkbox" id="optout">I opt out of the other options
    </div>
</div>

Javascript / JQuery：

$('#optout').click(function () {
    if ($(this).prop('checked') == true) {
        $('#Option1').hide("drop");
    } else {
        $('#Option1').show("drop");
    }
});

Answer 1

试试这个代码的jQuery

$('#optout').click(function () {
    $('#Option1').slideToggle("slow");
 });