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

我有一个有四个链接的列表，可以在四个div之间切换，效果非常好。现在，我想添加一个平滑的混合效果时，切换div。当前动画有点粗糙，因为新的div在前一个活动div的下方淡入，并在另一个div淡出时跳到正确的位置

HTML

你可以简单地改变

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

到

或者，如果有必要，您可以设置容器div的固定高度，并将溢出设置为隐藏：

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

请执行以下操作：

$（'#tabs div'）.fadeOut（）.delay（300）

而不是：

$（'#tabs div'）.fadeOut（）

这将淡出现有的div，添加一些延迟，然后淡入当前div，以便以平滑的方式获得混合效果

如果要退出fadeIn（），请尝试添加：

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

这里是更新后的
一种稍微不同的方法，将文本从锚移到一个单独的div，然后淡出并显示div的内容

JS

使用此解决方案，两个div相互淡入，不会出现白色停顿：）我喜欢您提出的解决方案，但如果您多次按相同的
项，透明淡入效果仍然保持不变。所以不完全是真的webkit.true，但通常情况下，活动选项卡对点击是禁用的，尽管我应该添加小提琴。。我会的！是的，那正是我想要的。urbz是正确的：是否有方法在单击活动li时禁用效果或禁用活动链接？+1用于
指针事件
属性。我还没见过它经常被使用。您提出的解决方案非常干净整洁。；-）
$('#tabs div').hide();

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

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

$('.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();
                                           });
});