Question

I know this has been asked a few times around here but most of the answers didn’t solve for the case where one could consistently append information and the box was visible to begin with (and I don’t know the new height I would like to animate to (because its text im adding))

Say I have a div and I append text to it how would I animate it

<div id="mybox">
Text
</div>

Javascript code (JQuery library is used)

function appendAndAnimate(text)
    $('#mybox').append(text +"<br/>")
end

I want to call this a couple of times and not have it jerk to the new height but slowly expand to it. (The box isn’t hidden to begin with or anything).
I’ve tried -webkit-transition and transition to no avail. I’ve also played around with capturing the height before and after and shifting it back and forth but theres no elegance here and its more a dirty solution

Because its text I wouldn’t like to use a flat on add a height with animation to the div box because people may have different font-scaling set on their browsers.

Answer 1

As I understood you want to make animation of mybox when you append text. I can see it like adding a new block of text into mybox and showing it with slideDown animation as an example. Then it will look like that:

$("button").click(function() {
    var el = $("<div />").css("display", "none").text("New Text")
    $("#mybox").append(el);
    el.slideDown(1000);
});​

DEMO: http://jsfiddle.net/YRuqP/

---

UPDATE. In fact I have even better solution. If you don’t want to add blocks of text. You can use another variant. Here we need to add one extra block inside mybox, so the markup will look like this:

<div id="mybox">
    <div>
        Text
    </div>
</div>

And set to mybox style overflow: hidden.

Then we can update the code a bit to have nice sliding animation when any piece of text is inserted.

var block = $("#mybox");
var child = block.children();
block.css("height", block.height());

$("button").click(function() {
    child.append(text);
    block.animate({
        height: child.height()
    });
});​

DEMO: http://jsfiddle.net/YRuqP/1/