多个div之间的平滑切换:混合效应

Question

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

http://jsfiddle.net/z6UH5/

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;}

以下是更新的小提琴

Answer 2

一种稍微不同的方法，将文本从锚移动到孤立的div，然后淡出并显示div的内容。小提琴。

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的固定高度，并将溢出设置为隐藏：

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

小提琴