jquery - div 追加带有动画的文本

Question

我知道这已经被问过几次了，但是大多数答案都没有解决可以始终如一地附加信息并且该框一开始就可见的情况(而且我不知道新的高度我想制作动画(因为我正在添加它的文字))

假设我有一个 div，我将文本附加到它，我将如何为其设置动画

<div id="mybox">
Text
</div>

Javascript代码(使用了JQuery库)

function appendAndAnimate(text)
    $('#mybox').append(text +"<br/>")
end

我想调用它几次，而不是让它猛增到新的高度，而是慢慢地扩展到它。 (这个盒子一开始并没有被隐藏或任何东西)。我试过 -webkit-transition 和 transition 都无济于事。我也玩过捕捉前后的高度并来回移动，但这里没有优雅，它更像是一个肮脏的解决方案

因为它的文本我不想使用平面来为 div 框添加带有动画的高度，因为人们可能在他们的浏览器上设置了不同的字体缩放。

Answer 1

据我了解，您想在附加文本时制作 mybox 的动画。我可以看到它就像将一个新的文本 block 添加到 mybox 中并以 slideDown 动画为例来显示它。然后它看起来像这样:

$("button").click(function() {
    var el = $("<div />").css("display", "none").text("New Text")
    $("#mybox").append(el);
    el.slideDown(1000);
});​

演示: http://jsfiddle.net/YRuqP/

---

更新。事实上，我有更好的解决方案。如果您不想添加文本 block 。您可以使用其他变体。这里我们需要在 mybox 中添加一个额外的 block ，因此标记将如下所示:

<div id="mybox">
    <div>
        Text
    </div>
</div>

并设置为mybox风格的overflow: hidden。

然后我们可以稍微更新一下代码，以便在插入任何一段文本时拥有漂亮的滑动动画。

var block = $("#mybox");
var child = block.children();
block.css("height", block.height());

$("button").click(function() {
    child.append(text);
    block.animate({
        height: child.height()
    });
});​

演示: http://jsfiddle.net/YRuqP/1/