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/

アップデート。実際、私はさらに良い解決策を持っています。テキストのブロックを追加したくない場合。別のバリアントを使用できます。ここでは、 内に 1 つの余分なブロックを追加する必要がある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/

于 2012-05-12T17:23:46.170 に答える