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>

JQUERY：

$(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} */

Answer 1

这是一个有效的例子http://fiddle.jshell.net/9ae3T/17/

modif是：

 var lheight = $("#viewMode").height();
      if(lheight != 0){
   $("#viewMode").css("height",lheight+"px");         
      }
      wrap.children().fadeOut(); $(type).delay(500).fadeIn(function(){
          $("#viewMode").css("height","auto");
      });

我已经占据了div的高度（你可以摆脱可怜的!= 0测试，只是为了防止第一次显示的修改）。在改变视图类型之前，我强制div的高度。在fadeIn回调中，我将div的高度设置为auto ...

在淡入/淡出div时如何防止空白空间以避免瞬间站点崩溃

1 个答案: