动画块高度从0到自动

Question

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

通常，

Block没有高度（我相信它是自动的，如果没有设置值？），但是块中有内容。所以身高来自内心。

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

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

和

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

但不知怎的，我的挡块高度不会改变。

Answer 1

我认为您需要.slideDown()功能。
我已经创建了一个小提琴文件：jsFiddle

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

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

Answer 2

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

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

来自documentation：

  

.slideToggle()方法可以设置匹配元素的高度。   这会导致页面的下半部分向上或向下滑动   透露或隐藏物品。

Answer 3

尝试改为使用height: toggle：

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