Question

我有一个包含四个链接的列表，可以在四个div之间切换，效果很好。现在，我想在div之间切换时添加平滑的混合效果。目前动画有点粗糙，因为新的div在前一个活动的下面消失，当另一个div消失时跳转到正确的位置。

HTML

    <ul>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
      <li><a href="#tab-4">Tab 4</a></li>
    </ul>

    <div id="tab-1">
      Tab 1
    </div>

    <div id="tab-2">
      Tab 2
    </div>

    <div id="tab-3">
      Tab 3
    </div>

    <div id="tab-4">
      Tab 4
    </div>

</div>

的jQuery

$(document).ready(function(){
  $('#tabs div').hide();
  $('#tabs div:first').show();
  $('#tabs ul li:first').addClass('active');

  $('#tabs ul li a').click(function(){ 
      $('#tabs ul li').removeClass('active');
      $(this).parent().addClass('active'); 

      var currentTab = $(this).attr('href'); 

      $('#tabs div').fadeOut();
      $(currentTab).fadeIn();
      return false;
  });
});

Answer 1

如果你想离开fadeIn（），请尝试添加：

#tabs div  { position:absolute;}
#tabs li.active a { pointer-events:none;}

这是更新的fiddle

Answer 2

稍微不同的方法，将文本从锚点移动到隔离的div，然后淡出并显示div的内容。 FIDDLE

JS

$('.tabholder div').show();
$('#tabs ul li:first').addClass('active');
$('.tabholder').html( $('#tabs ul li a:first').html() );


$('#tabs ul li a').click(function(){ 
  $('#tabs ul li').removeClass('active');
  $(this).parent().addClass('active');
  var clickedtab = $(this);

  $('.tabholder').fadeOut( 500, function(){
                          $('.tabholder').html( clickedtab.html() );
                          $('.tabholder').fadeIn();
                                           });
});

Answer 3

你可以简单地改变

$('#tabs div').fadeOut();

到

$('#tabs div').hide();

或如果有必要，您可以设置容器div的固定高度并将overflow设置为hidden：

#tabs {
    height: 120px;
    overflow: hidden;
}

fiddle

Answer 4

这样做：

$('#tabs div').fadeOut().delay(300);

而不是：

$('#tabs div').fadeOut();

这会淡化现有的div，添加一些延迟，然后在当前div中淡出，以便您以平滑的方式获得混合效果。

JSFIDDLE DEMO

多个div之间的平滑切换：混合效果

4 个答案: