Question

如何将附加文本设置为div标签的动画。例如，div开始时没有文字。当用户单击一个按钮时，它会将文本添加到div扩展到文本高度的div。而不是仅仅立即扩展。我想动画扩展。

当文本附加到div时，我是否首先需要存储div的高度。然后将div的高度设置为0，然后将高度设置为存储的文本高度，或者是否有更有效的方法。

更新说明 添加时，文本将在div中填充大约4行。拿3个div，一个顶部div，中心div，这是我的空div等待填充。然后一个底部div。在我的中间div中没有文本，看起来顶部和底部div彼此接近。随着4行文本添加到中间div，底部div立即被中间div中新文本的高度向下推。我希望在动画中展示这一点，而不是立即发生。

Answer 1

如果div开始时没有文字，那么只需显示它，然后在文本填满后将其向下滑动。 E.g：

$("#myDiv").html(html).slideDown("slow");

假设div开始隐藏，例如：

<div id="myDiv" style="display:none"></div>

Answer 2

一个建议：不要为高度设置动画，只需设置字体大小的动画，让高度自然地增长到适合的高度。例如：

<div></div>
<input>
<button>Add text</button>

$('button').click(function(){
    $('div')
        .text($('input').val())
        .css({fontSize: 0})
        .animate({
            fontSize: "24px",
        });
});

演示：http://jsfiddle.net/UHcp6/

真的，这取决于你想要的确切行为，这只是一种方法。

之后添加其他文字似乎是动画的错误案例，但如果您想要附加文字，只需将原始值存储在text()的变量中，然后使用text(var + your_text)。

动画附加文本

2 个答案: