在jQuery.load上动画大小的高度（）

Question

我使用$（'＃container_div'）。load（url）通过ajax填充div。我想将高度设置为返回内容的高度，但真的无法弄清楚如何实现这一点。

我用这样的尝试：

$('#main').fadeOut(function() { 

$('#main').load(url, function(data) { 
    var newHeight = $(data).height(); 
     $('#main').animate({height:newHeight}, function() {$('#main').fadeIn();}); 
    }); 
}); 

但可以看出，这是错误的这么多层次。尤其是由于newHeight ===未定义的事实。

有人可以在这里指出我正确的方向吗？我会永远感激。

Answer 1

由于fadeOut()通过隐藏目标元素完成，所以你的#main将完全隐藏，因为你的新数据加载完毕后，呈现高度不可见的，因此没有意义的任何动画。

但是你可以只使用类似$('#main').show(400)将从一个大小为（0,0），动画元素和不透明度为0到任何大小由所允许的容器和内容以及1的完全可见不透明度（并行运行这些动画，使它们都可见）。但是假设你关心高度的动画比你关于衰落的做的更多，你仍然有一个问题：在load（）调用它的回调的时候，目标元素的高度已经为为内容的高度（或尽可能接近它）。所以动画不会做任何事情。

I posted a plugin on a previous question，会做你想要什么，但你需要使用$.get()，而不是load()：

$.get(url, function(data) { 
    $('#main').showHtml(data); 
}); 

...其中showHtml被定义为：

// Animates the dimensional changes resulting from altering element contents 
// Usage examples: 
// $("#myElement").showHtml("new HTML contents"); 
// $("div").showHtml("new HTML contents", 400); 
// $(".className").showHtml("new HTML contents", 400, 
//     function() {/* on completion */}); 
(function($) 
{ 
    $.fn.showHtml = function(html, speed, callback) 
    { 
     return this.each(function() 
     { 
     // The element to be modified 
     var el = $(this); 

     // Preserve the original values of width and height - they'll need 
     // to be modified during the animation, but can be restored once 
     // the animation has completed. 
     var finish = {width: this.style.width, height: this.style.height}; 

     // The original width and height represented as pixel values. 
     // These will only be the same as `finish` if this element had its 
     // dimensions specified explicitly and in pixels. Of course, if that 
     // was done then this entire routine is pointless, as the dimensions 
     // won't change when the content is changed. 
     var cur = {width: el.width()+'px', height: el.height()+'px'}; 

     // Modify the element's contents. Element will resize. 
     el.html(html); 

     // Capture the final dimensions of the element 
     // (with initial style settings still in effect) 
     var next = {width: el.width()+'px', height: el.height()+'px'}; 

     el .css(cur) // restore initial dimensions 
      .animate(next, speed, function() // animate to final dimensions 
      { 
       el.css(finish); // restore initial style settings 
       if ($.isFunction(callback)) callback(); 
      }); 
     }); 
    }; 


})(jQuery); 

Answer 2

这是因为$(data)不在DOM，但是$(this)是:)

$('#main').fadeOut(function() { 

    $('#main').load(url, function(data) { 
    var newHeight = $(this).height(); 
    $(this).animate({height:newHeight}, function() {$(this).fadeIn();}); 
    }); 
}); 

但是新的高度将已经是它在做什么是在这一点上，你无法猜测的高度新的内容，因为这一切都确定由它的容器，你可能会更好保存和恢复它，像这样：

$('#main').animate({ opacity: 0 }, function() { 
    var height = $(this).height();  //previous height 
    $('#main').load(url, function(data) { 
    var newHeight = $(this).height(); //new height 
    $(this).height(height)    //set old height before animating to new 
      .animate({height:newHeight})//animate to new height 
      .fadeIn();     //fade is a queued animation 
    }); 
}); 

我在这里动画的不透明度，因此display:none没有得到适用，使得这很简单整体而言。

Answer 3

首先，将您的数据加载到一个临时div中，您可以通过绝对定位将其隐藏到页面的左侧和顶部。然后你可以得到它的高度（只要它在css中的高度设置为'auto'），使用该高度信息来动画你显示的div。最后，不要忘记从dom中移除临时div并在动画完成后将你展示的div的高度设置为'auto'