jQuery动画div大小

问题描述

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

I have a div with hidden visibility, and I'm putting text in to that div from database so don't know it's height.

我想要什么要做的是制作一个动画，这会增加div的大小，直到所有文字都可见。我到目前为止是这样的：

What I would like to do is make an animation which would increase that div's size until all text is visible. What I have so far is this:

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，那么我无法知道它的实际大小...

So my problem is that my form_container is hidden, but its size remains, so I have huge empty space. If I set its size to 0px then I have no way of knowing its real size...

推荐答案

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

I don't think you need to mess with the visible CSS property.

只需在CSS中做这样的事情：

Just do something like this in your CSS:

#form_container { display: none; }

然后你的display_form函数可以做到这一点：

Then your display_form function can just do this:

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

这篇关于jQuery动画div大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！