jquery - 一時的なサイトの崩壊を回避するために div をフェードイン/アウトするときに空白を防止する方法

Question

スクリプトを使用して、ユーザーが表示モード (グリッド、リスト、およびフル) を切り替えることができるようにしています。ユーザーがビューモードを変更すると、アクティブなビューがフェードアウトし、選択したビューがフェードインします。その移行中は空きスペースがあり、サイトが応答するため、コンテンツに固定の最大高さを設定したくありません。

以下からわかるように、ビューモードを切り替えるとフッターがジャンプします。

http://fiddle.jshell.net/9ae3T/12/

ビューモードが設定されるたびに、コンテンツの新しい最大高さを設定する方法はありますか? （それにより、一時的なネガティブ スペースを回避し、アクティブ コンテンツの高さに合わせますか？）

HTML:

 <ul class="tabs js-view-mode">
      <li><a href="#list">List</a></li>
      <li><a href="#grid">Grid</a></li>
      <li><a href="#full">Full</a></li>
    </ul>

    <section id="viewMode" class="content">
      <div id="list">here is list mode content</div>
      <div id="grid">here is grid mode content</div>
      <div id="full">here is full mode content</div>
    </section>

<footer></footer>

Jクエリ:

$(document).ready(function(){
  var wrap = $('#viewMode'),
      viewMode = $.cookie( 'view-mode' );
  wrap.children().hide();

  $('.js-view-mode').on( 'click', 'a',function( e ){
    e.preventDefault();
    var t = $(this),
        type = t.attr('href');

   wrap.children().fadeOut(); $(type).delay(500).fadeIn();

    viewMode = $.cookie( 'view-mode', type );

  });

  if ( viewMode ) {
    $('.js-view-mode a[href='+ viewMode +']').trigger('click');
  } else {
    $('.js-view-mode li:first a').trigger( 'click' );
  }

});

CSS (デモンストレーション用):

footer {background: red; display: block; width: 100%; height: 5px}

#list {height: 20px; width: 100%;display: block}
#grid {height: 55px; width: 100%;display: block}
#full {height: 100px; width: 100%;display: block}

/*.content {THIS NEEDS TO BE SET TO THE ACTIVE VIEWMODE CONTENT HEIGHT} */