Question

我正在做一个简单功能的噩梦！

我希望它：

读取包含现有内容的div的高度
使用新内容（提供给该功能）更新div
读取div的高度，但将其设置为原始高度。
为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/

更新

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

为什么这个javascript（jquery）函数似乎运行不正常？

2 个答案: