Анимация высоты континента в jQuery.load ()

Question

Я использую $ ('# container_div'). Load (url) для заполнения div через ajax. Я хотел бы анимировать высоту до высоты возвращаемого содержимого, но не могу понять, как этого добиться.

Я пытался использовать что-то вроде этого:

$('#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 () вызывает свой обратный вызов, высота целевого элемента (элементов) уже будет высота содержимого (или как можно ближе к нему). Анимация ничего не сделает.

Я опубликовал плагин для предыдущего вопроса , который будет делать то, что вы хотите, но вам нужно будет использовать $. 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

Во-первых, загрузите ваши данные во временный блок, который вы скрыли слева и сверху страницы с абсолютным позиционированием. Затем вы можете получить высоту этого значения (поскольку в CSS для его высоты установлено значение 'auto'. Используйте эту информацию о высоте для анимации отображаемого вами div. Наконец, не забудьте удалить временный div из dom и установите высоту отображаемого элемента «auto» после завершения анимации.