我正在使用$(’#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的不透明度(并并行运行这些动画,使它们都可见)。
$('#main').show(400)
但是,假设您更关心动画高度而不是淡入淡出,那么您仍然会遇到一个问题:当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);