jQuery，将变量值的高度动画设置为div上的自动答案

【问题标题】：jQuery, Animate height from a variable value to auto on divjQuery，将变量值的高度动画设置为div上的自动
【发布时间】：2012-06-12 19:59:21
【问题描述】：

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

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

【问题讨论】：

使用css 而不是animate
.animate 在px 中需要一个固定的height。它不能取值auto 并进行动画处理。您应该使用 .css 也应该是 { height: 'auto'} （注意 auto 周围的引号）>> jsfiddle.net/skram/yAADY
你的意思是jsfiddle.net/j08691/xGUR5？
类似的东西我有改变高度的动态内容，所以我希望它在动态内容改变时动画到高度。

标签： jquery html jquery-animate toggle

【解决方案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);
    }
);

【讨论】：