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 () {
      });
  });