Настройка плавного изменения окружающего DIV после изменения размера дочернего элемента div

Question

Это будет долго ...

Хорошо, я пытаюсь сделать так, чтобы размер внешнего div изменялся при изменении дочернего div, но в настоящее время это мерцающее движение, оно переходит из точки «a» в точку «b».

Другой способ моего объяснения:

• Оригинальные размеры:

Внутренний div: 300px на 300px

Внешнее деление: 300 на 500 пикселей

• Новые размеры:

Внутренний div: 300px на 400px

Внешний делитель: 300px на 600px

Когда внутренний div, он заставляет внешний div изменяться на высоту новых измерений. То, как происходят переходы, выглядит следующим образом:

Исходная страница -> Затухание текущего содержимого -> Загрузка нового содержимого -> Переход в новое содержимое -> развернуть внешние размеры на место

Я пытаюсь получить это как:

Исходная страница -> Затухание текущего содержимого -> настройка внешних размеров с помощью анимации -> Загрузка нового содержимого -> Переход в новое содержимое

код

• JQuery

  $(this).click(function(){
      currentPageItem = $(this);
      elem = $(this).attr('id');
      view = 'views/' + elem + '.php';
      $('#content').fadeOut('slow', function() {
          $(this).hide();
          $(this).load(view, function() {
          $(this).fadeIn('slow');
      });
  });
  

Answer 1

Установите CSS для внутреннего div на «height: 100%;». Таким образом, вам нужно только изменить размер внешнего div.

Если есть какая-то деталь, которую я не понимаю, возможно, jsfiddle поможет.