为什么这个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');