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

将<div>设置为未知高度</div>

2 个答案: