CODEWITHSUNDEEP
javascriptjqueryhtml
Linas
Linas

Reputation: 4408

jQuery animate div size

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

Upvotes: 0

Views: 1969

Answers (3)

rossipedia
rossipedia

Reputation: 59367

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);
}

Upvotes: 2

antoniovassell
antoniovassell

Reputation: 1032

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.

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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

Upvotes: 1

Related Questions