jQuery，将高度从可变值动画化为自动在div上

Question

我想使用切换动画将div的高度从变量值动画化为自动。 我知道我没有正确调用变量。 只是想看看如何做到这一点。

var scheight = $('.searchcontainer').height();
$('.searchcontainer').toggle(
    function () {
        $(".searchcontainer").animate({ height: scheight + "px" }, 500);
    },
    function () {
        $(".searchcontainer").animate({ height: auto}, 500);
    }
);

Answer 1

如果您在“ searchcontainer”元素中放置内容的另一个容器，则两种方式的动画将更加容易。 这种方法将使您能够检测内容的高度，并具有该像素值（而不是依赖于“自动”）为您提供了一个目标，您现在可以将其设置为动画：

http://jsfiddle.net/XdPry/3/

的HTML：

<div style="height:200px;border:1px solid #000000">
    <div class="searchcontainer" style="background-color:#aa22aa">
        <div>content</div>
    </div>
</div>​

jQuery的：

$('.searchcontainer:first').toggle(
    function () {
        $(this).animate({ height: parseInt($(this).parent('div').height()) }, 500);
    },
    function () {
        $(this).animate({ height: parseInt($(this).children('div:first').height()) }, 500);
    }
);​