jquery - 多个div平滑切换 : blend effect

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

这是更新后的 fiddle