javascript - アニメート未知の高さへ

Question

状況: ajax を使用してページをロードするインデックス ページがあります。

$("#ajax2").load("contact.php");

私はすべてのページでこれを行いますが、サイズが実際に途切れ途切れになり、これをアニメーション化したいと考えています。

私のインデックスページからの重要なもの:

<ul id="nav">
    <li id="current"><a href="#" id="home" onclick="pages('home');">Home</a></li>
    <li><a href="#" id="contact" onclick="pages('contact');">Contact</a></li>
</ul>

私のJavaScript関数：

var pages = function(id) {
switch(id) {
    case 'home':
        $("#ajax2").load("home.php");
        break;
    case 'contact':
        $("#ajax2").load("contact.php");
        break;
}
};

私のdiv "ajax2"が本当にスムーズにサイズを変更するように、誰かが私が何をする必要があるかを教えてくれますか?

私は使用しただろう

$("#ajax2").animate({ height: '60px' }, 'easeInOutCubic', function(){
});

ただし、連絡先/ホーム/ページの高さはわかりません。

解決済み

Answer 1

ただし、連絡先/ホーム/ページの高さはわかりません。

高さ関数を使用して高さを見つける

var h = $("#ajax2").height();

$("#ajax2").animate({ height: h }, 'easeInOutCubic', function(){
});

Answer 2

$("#ajax2")
  .css({
    display:'none'
  })
  .load('home.php', function () {
    var height;
    height = $(this).height();
    $(this)
      .css({
        height :0,
        display:'block'
      })
      .animate({
        height:height
      }, 1000, 'linear', function () {
      });
  });