jQueryを使用してアニメーションをDivに挿入する

Question

jQueryでanimateを使用するとコンテンツをスムーズに埋め込むことができますか？つまり、コンテンツを挿入するときにdivの高さをアニメーションしますか？例えば

（HTML）：次に

<div id="my-div"></div> 

（JavaScriptの）：

$("#my-div").html("some new really long string of text which makes the div height increase."); 

私は、HTMLの挿入、ひいては高の増加をアニメーション化したいと思います。

Answer 1

テキストを実際にアニメーション化したい場合は、一度に1文字ずつテキストをゆっくりと追加する必要があります。あなたがより多くのテキストをドロップするように非常にゆっくりと自動的に高さを調整して：あなたは

http://jsfiddle.net/rkw79/fCAVp/

$("#my-div") 
    .hide() 
    .html("some new really long string of text ...") 
    .slideDown('slow'); 

Answer 2

slideDown()とslideUp()を使用できます。このような

何か：

$("#my-div").slideUp('slow', function() { $("#my-div").html("some new really long string of text which makes the div height increase."); }).slideDown('slow'); 

編集：

あなたがanimate()とheight()this wayを使用できるように行うには、スムーズのdivの高さを増やすことができます。

また、FadeIn sampleも作成しました。

Answer 3

おそらく、CSS属性overflow:hidden; height:...とjQueryのslideDown()機能の組み合わせを使用できます。

固定高さのdivにテキストを挿入し、新しい高さを決定してアニメーションします。

Answer 4

答えは非常に簡単です）、すでに述べてきたものを他の人を使用して.slideDownを（同様の効果を得ることができますdiv：

$('#thedivid').append('<p>'+newtextbeingadded+'</p>').animate({ 'height':'auto' },5000); 

これはおそらくトリックです。それに応じて5000を調整する必要があるかもしれません。

また、垂直スクロールバーが表示され、オーバーレイで「thedivid」を作成する可能性があります。

幸運を祈る！