jQuery动画div大小

Question

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.

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>

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...

Answer 1

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

Just do something like this in your CSS:

#form_container { display: none; }

Then your display_form function can just do this:

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

Answer 2

Have a look at the jQuery's slideDown . Then you don't have to worry about the height on your own.

Answer 3

Not sure how you are getting text from the database but if you initial have the div hidden, then place the text in the div, then you can simple use the slideDown(1000) function on that div like so: $('#mydiv').slideDown(1000); The div will slide down until all the content is shown.