动画块高度从 0 到自动答案

【问题标题】：Animating block height from 0 to auto动画块高度从 0 到自动
【发布时间】：2014-03-02 20:44:06
【问题描述】：

尝试使用 .animate 创建动画。我希望块的高度：0px，所以我使用了 CSS。

正常情况

块没有高度（我相信它是自动的，如果未设置值？），但块中有内容。所以高度来自它里面的东西。

我希望我的块将高度 0 设置为自动。所以我这样做了：

.panelContainer {
    height: 0;
    overflow: hidden;
}

和

(document).ready(function(){
    $(".panelContainer").animate({
        height: "auto"
    }, 1000);
});

但不知何故，我的块高度没有改变。

【问题讨论】：

标签： jquery css

【解决方案1】：

我想你想要.slideDown() 函数。
我已经创建了一个小提琴文件：jsFiddle

$(document).ready(function(){
    $('.panelContainer').slideDown(1000);
});

当网站出现时，panelContainer 会向下滑动。

【讨论】：

【解决方案2】：

尝试改用height: toggle：

$(document).ready(function(){
    $(".panelContainer").animate({
        height: "toggle"
    }, 1000);
});

【讨论】：

【解决方案3】：

你真正想要的是.slideToggle()：它正是你正在寻找的那种动画。

$('.panelContainer').slideToggle();

.slideToggle() 方法为匹配元素的高度设置动画。这会导致页面的下部向上或向下滑动，看起来显示或隐藏物品。

【讨论】：