我使用$（'＃container_div）。载荷（URL）来填充通过AJAX一个div。我想的高度来返回内容的高度动画，但确实无法弄清楚如何实现这一目标。

I'm using $('#container_div').load(url) to populate a div via ajax. I would like to animate the height to the height of the returned content but really cant figure out how to achieve this.

我已经用这样的尝试：

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

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

不过，可以看到，这是不对的就这么多的水平。特别是由于这一事实，即newHeight ===未定义。

But can see that this is wrong on so many levels. Especially due to the fact that newHeight === undefined.

任何人都可以点我在正确的方向吗？我会感激不尽。

Can anybody point me in the right direction here? I would be eternally grateful.

推荐答案

由于淡出（）完成通过隐藏的目标要素，机会是你的#main将被新的数据被加载时完全隐藏，呈现高度的不可见的，因此毫无意义的任何动画。

Since fadeOut() finishes by hiding the target elements, chances are your #main will be completely hidden by the time your new data is loaded, rendering any animation of height invisible, and therefore pointless.

但你的可以的只是使用类似 $（' #main'）。显示（400） ，以从的尺寸（0,0）和0不透明度为任何大小动画元件所允许的容器和内容以及一个的1完全可见不透明度（和并行运行这些动画，使得两者可见）。

But you could just use something like $('#main').show(400) which will animate the element from a size of (0,0) and opacity of 0 to whatever size is allowed by the container and contents and a fully-visible opacity of 1 (and run these animations in parallel, making both of them visible).

不过，假设你更在乎的高度动画比你做一下褪色，你还有一个问题：由当时的负载（）调用它的回调，目标元素（S）的高度就已经的是的内容的高度（或尽可能接近到它）。所以，动画不会做任何事情。

But assuming you do care more about animating the height than you do about fading, you still have a problem: by the time load() calls its callback, the height of the target element(s) will already be the height of the content (or as close as possible to it). So animating won't do anything.

我发布了一个插件在previous问题，会做什么你想要的，但你需要使用 $。获得（）代替的 load（）的：

I posted a plugin on a previous question that will do what you want, but you'll need to use $.get() instead of load():

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

...其中showHtml定义为：

...where showHtml is defined as:

// 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);