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在附加文字时制作动画.我可以看到它像添加一个新的文本块mybox并以slideDown动画显示它作为一个例子.然后它看起来像那样:

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

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

UPDATE.事实上我有更好的解决方案.如果您不想添加文本块.您可以使用其他变体.这里我们需要在里面添加一个额外的块mybox,所以标记将如下所示:

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