1

我知道这已经在这里被问过几次了，但是大多数答案都没有解决人们可以始终如一地附加信息并且该框从一开始就可见的情况（而且我不知道我想要的新高度动画到（因为它的文本即时添加））

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

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

Javascript代码（使用JQuery库）

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

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

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

4

1 回答 1

5

据我了解，您希望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/

更新。事实上，我有更好的解决方案。如果您不想添加文本块。您可以使用其他变体。这里我们需要在里面添加一个额外的块mybox，所以标记看起来像这样：

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

并设置为myboxstyle 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/

于 2012-05-12T17:23:46.170 回答