divの内容が変化したときのdivの高さの変化をアニメーション化

Question

私はdiv#menuに情報リストを表示しています。その情報はajaxによって変化します。それが変更されたら、高さAから高さBへの遷移をアニメーション化したいと考えています。

私は.animate({'height': 'something')を使用できますが、これをどのように接着するかわかりません。

私はjQueryを使用しています。

どうすればいいですか？

編集。

AJAX呼び出しは、次のようになります

$.ajax({ 
    url: $(this).data('redraw-event-url'), 
    dataType: 'script' 
    }) 

Answer 1

ユーザーがそれを見ることができないようにするには、オフスクリーンDOMに新しいHTMLを追加することができます。その後、高さを取得し、新しいHTMLを一時的なオフスクリーン位置から最終的な移動先に移動する直前にコンテナの高さを変更します。このような何か：

$.ajax({ 
    success : function (serverResponse) { 

     //add the new HTML to the DOM off-screen, then get the height of the new element 
     var $newHTML = $('<div style="position : absolute; left : -9999px;">' + serverResponse + '</div>').appendTo('body'), 
      theHeight = $newHTML.height(); 

     //now animate the height change for the container element, and when that's done change the HTML to the new serverResponse HTML 
     $('#menu').animate({ height : theHeight }, 500, function() { 

      //notice the `style` attribute of the new HTML is being reset so it's not displayed off-screen anymore 
      $(this).html($newHTML.attr('style', '')); 
     }); 
    } 
}); 

Answer 2

あなたは手順のカップルでこれを実行する必要があります

• まず、理想的に隠された別のdivの、内部で新たにデータを置くかどうかさえDOMに。
• 第二には、この第二のdivが
• は、アニメーションを介して第1のdivの高さを設定されているどのように背の高い把握、およびアニメーションはがを終了すると、コンテンツ

を交換するので、いくつかのコード：

// put the content into a hidden div 
$('#hiddendiv').html(content); 

// get the target height 
var newHeight = $('#hiddendiv').height(); 

// animate height and set content 
$('#menu').animate({'height': newHeight}, function(){ 
    $('#menu').html($('#hiddendiv').html()); 
}); 

Answer 3

素敵な解決策はsuccessコールバックにdiv#menuオブジェクトをレンダリングすることです

$.ajax({ 
    url: $(this).data('redraw-event-url'), 
    dataType: 'script', 
    success: function(){ 
     $('div#menu').animate({'height': 'something'); 
     } 
    }) 

希望はこれが

Answer 4

を助け、私はコンテナを含むクリーナー、よりよい解決策を持っていると信じて：私は何

<div id="menu_container"> 
    <div id="menu"> 
    <p>my content</p> 
    </div> 
</div> 

は、私は、現在の高さに、コンテナののmaxHeightとminHeightのロックということですdiv。次に、私は上記のdivの内容を変更します。最後に、コンテナの最大高さと最小高さを内部divの現在の高さに「解放」します。

$("#menu_container").css("min-height", $("#menu").height()); 
$("#menu_container").css("max-height", $("#menu").height()); 
$("#menu").fadeOut(500, function() { 

    //insert here the response from your ajax call 
    var newHtml = serverResponse; 

    $(this).html(newHtml).fadeIn(500, function() { 
     $("#menu_container").animate({minHeight:($("#menu").height())},500); 
     $("#menu_container").animate({maxHeight:($("#menu").height())},500); 
    }); 
});