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 === undefined的事实。

有人能指出我正确的方向吗？我会永远感激。

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”。

在jQuery.load（）上设置容器高度的动画

3 个答案: