為什么這個javascript（jquery）函數似乎運行不正常？

Question

我有一個簡單功能的噩夢！

我希望它：

1. 讀取包含現有內容的div的高度
2. 使用新內容更新div（提供給函數）
3. 讀取div的高度，但將其設置為原始高度。
4. 動畫div的高度以調整和適應新內容。

代碼如下：

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

}

當我運行它時，它似乎忽略了內容已經改變的事實，並且只使用原始高度（因此不進行任何動畫，因為它認為高度沒有改變）。

如果可以的話請幫忙！！ 這讓我瘋了。

Answer 1

為我工作。 您的錯誤可能在其他地方... http://jsfiddle.net/6aBfD/

UPDATE

http://jsfiddle.net/6aBfD/3/

但那只能工作一次 。 問題是你依靠一個元素來設置它自己的高度並從中讀取。 但在第一次運行后，您將高度鎖定到特定值。 更新的鏈接具有正確的工作clode，多次單擊它。 我添加了以下內容：

$("#status-message")
    .css("overflow","visible")
    .css("height", "auto");

現在，當你讀到高度時，它將是它的自然高度。 然后再次設置oveflow和height以將其鎖定為您想要的。

Answer 2

搶，

嘗試以下代替.height（）：

var status_origheight = $("#status-message").css('height');