在jQuery.load（）上设置continer的高度
我正在使用$（’＃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 === undefined的事实。
任何人都能指出我在正确的方向吗？ 我将永远感激不尽。
由于fadeOut（）通过隐藏目标元素来完成，因此在加载新数据时，你的#main将被完全隐藏，渲染任何高度不可见的动画，因此毫无意义。
但你可以使用像$('#main').show(400) ，它将元素从（0,0）的大小和0的不透明度动画到容器和内容所允许的任何大小和一个完整的 – 可见不透明度为1（并且并行运行这些动画，使它们都可见）。
但是假设你更关心动画高度而不是关于衰落，你仍然有一个问题：当load（）调用它的回调时，目标元素的高度已经是内容的高度（或尽可能接近它）。 所以动画不会做任何事情。
我在之前的问题上发布了一个插件 ，可以执行您想要的操作，但是您需要使用$ .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);
这是因为$(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不适用，使整体更加简单。
首先，将您的数据加载到临时div中，您可以通过绝对定位隐藏到页面的左侧和顶部。 然后你可以获得它的高度（只要它在css中的高度被设置为’auto’。使用该高度信息来动画你正在显示的div。最后，不要忘记从dom中删除临时div并在动画完成后将显示的div的高度设置为“auto”。