Javascript 引导悬停选项卡显示多个选项卡

我用了这个问题的答案“

问题是，当鼠标在所有选项卡上快速移动时，选项卡内容元素中会显示多个.tab窗格元素

HTML

在标签上快速来回移动鼠标，有时您会同时看到：

表1内容

表2其他内容

---

在我的实际版本中，问题发生时不必移动得太快。

这是因为引导中的

淡入淡出类是一个动画。如果你动作快一点，第一个动作在第二个动作开始之前还没有完成。更改HTML：

<div class="tab-content">
  <div class="tab-pane active" id="tab1">
      TAB1 CONTENT
  </div>
  <div class="tab-pane" id="tab2">
      TAB2 OTHER CONTENT
  </div>
  <div class="tab-pane" id="tab3">
      TAB3 MORE CONTENT
  </div>
  <div class="tab-pane" id="tab4">
      TAB4 SO MUCH CONTENT
  </div>  
</div>


表1内容
表2其他内容
表3更多内容
表4这么多内容

更新了你的小提琴：
如果你想保持淡入效果，你还可以做的是使用一个布尔值来跟踪某个选项卡当前是否淡入，以防止其他选项卡被触发，这应该有效：

var tabFadingIn = false;
$('.nav-tabs > li').mouseover( function(){
  var $tab = $(this).find('a');
  if (!tabFadingIn) {
    tabFadingIn = true;
    $tab.one('shown.bs.tab', function() {
      tabFadingIn = false;
    });
    $tab.tab('show');
  }
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

也许你可以试试我的解决办法。
我在我的代码中尝试了这个解决方案，它很有效。
对于悬停解决方案，我遵循以下解决方案：

添加此行（第3行或在..e.preventDefault（）；..之后）

这一行（在..jQuery（this）.tab（'show'）之后）

所以代码变成这样：

jQuery('.nav-tabs a').hover(function(e){
    e.preventDefault();
    jQuery('.tab-pane').removeClass('active');
    tabContentSelector = jQuery(this).attr('href');
    jQuery(this).tab('show');
    jQuery(tabContentSelector).addClass('active');
});

为我找到解决办法。
淡入淡出动画的默认速度为0.15s。您需要将其还原为0.1s。现在，另一张图片在第一次消失之前没有时间出现。
感谢您的快速回复！我有办法保留动画吗？可能会检查任何其他活动选项卡并将其隐藏？不确定，bootstrap的
fade
是CSS转换：
opacity:0-webkit过渡：不透明度。15s线性；过渡：不透明度。15s线性，我真的不知道如何以可控的方式中断其中一个。也许如果您使用jquery编写自己的淡入淡出动画，您可以使用它的排队或链接机制。
var tabFadingIn = false;
$('.nav-tabs > li').mouseover( function(){
  var $tab = $(this).find('a');
  if (!tabFadingIn) {
    tabFadingIn = true;
    $tab.one('shown.bs.tab', function() {
      tabFadingIn = false;
    });
    $tab.tab('show');
  }
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

jQuery('.nav-tabs a').hover(function(e){
    e.preventDefault();
    jQuery(this).tab('show');
});

jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');

jQuery(tabContentSelector).addClass('active');

jQuery('.nav-tabs a').hover(function(e){
    e.preventDefault();
    jQuery('.tab-pane').removeClass('active');
    tabContentSelector = jQuery(this).attr('href');
    jQuery(this).tab('show');
    jQuery(tabContentSelector).addClass('active');
});