jQuery动画div大小

Question

我有一个具有隐藏可见性的div，并且我正在将文本从数据库放入该div中，所以不知道它的高度。

我想做的是制作一个动画，该动画将增加div的大小，直到所有文本都可见。 我到目前为止所拥有的是：

function display_form () {
    $("#form_container").css("visibility", 'visible');
    $("#form_container").animate({
        height: $("#form_container").height(),
    }, 1500);
}

<div id="container">
    <div id="form_container"><?php echo $form; ?></div>
    <div id="content">
        some stuff here which should slide down as the form_container div gets bigger
    </div>
</div>

所以我的问题是我的form_container是隐藏的，但是它的大小保持不变，所以我有巨大的空白空间。 如果我将其大小设置为0px，则无法得知其实际大小...

Answer 1

我认为您不需要弄乱visible CSS属性。

只需在CSS中执行以下操作即可：

#form_container { display: none; }

然后，您的display_form函数可以执行以下操作：

function display_form() {
    $('#form_container').slideDown(1500);
}

Answer 2

看一下jQuery的slideDown 。 然后，您不必担心自己的身高。

Answer 3

不确定如何从数据库中获取文本，但是如果最初是将div隐藏起来，然后将文本放在div中，则可以像下面这样简单地在div上使用slideDown（1000）函数：$（'＃mydiv' ）.slideDown（1000）; div将向下滑动，直到显示所有内容。