Why does this javascript (jquery) function seem to run out of order?
<p>I'm having a nightmare with a simple function!</p>

<p>I want it to:</p>

<ol>
<li>read the height of a div with existing content in it</li>
<li>Update the div with the new content (supplied to the function)</li>
<li>Read the height the div should be, but set it to the original height.</li>
<li>Animate the div's height to adjust and fit the new content.</li>
</ol>

<p>Code is as follows:</p>

<pre><code>// function to display status content by animating the height of the status message
function slideStatus(content){

    // get current height
    var status_origheight = $("#status-message").height();

    // insert new content
    $("#status-message").html(content);

    // get new height
    var status_newheight = $("#status-message").height();

    // set the height to the orig value, hiding overflow content
    $("#status-message").height(status_origheight).css("overflow","hidden");

    // animate the div to the new height
    $("#status-message").animate({height:"+="+(status_newheight - status_origheight)+""}, 1000);

}
</code></pre>

<p>When i run this, it appears to ignore the fact that the content has changed, and just use the original height (therefore do no animation as it thinks the height has not changed).</p>

<p>Please help if you can!! It's driving me nuts.</p>
