5

I've used the answer from this question 'How to make twitter bootstrap menu dropdown on hover rather than click'

The problem is that when the mouse is moved quickly over all tabs, multiple .tab-pane elements are displayed in the tab-content element.

Demo

HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1">Home</a></li>
  <li><a href="#tab2">Profile</a></li>
  <li><a href="#tab3">Messages</a></li>
  <li><a href="#tab4">Account</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade active" id="tab1">
      TAB1 CONTENT
  </div>
  <div class="tab-pane fade active" id="tab2">
      TAB2 OTHER CONTENT
  </div>
  <div class="tab-pane fade active" id="tab3">
      TAB3 MORE CONTENT
  </div>
  <div class="tab-pane fade active" id="tab4">
      TAB4 SO MUCH CONTENT
  </div>  
</div>

JS

$('.nav-tabs > li').mouseover( function(){
    $(this).find('a').tab('show');
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

Move the mouseX across the tabs rapidly back and forth and sometimes you will see both at once:

TAB1 CONTENT

TAB2 OTHER CONTENT

In my actual version you don't have to move as fast for the problem to occur.

Community
  • 1
  • 1
user1425011
  • 119
  • 2
  • 13

4 Answers4

7

It's the because the fade class in bootstrap is an animation. If you move fast enought, the first one hasn't finished before the second one starts. Change the 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>

Updated your fiddle: http://jsfiddle.net/VPn52/1/

Jorg
  • 7,219
  • 3
  • 44
  • 65
  • Thanks for the quick reply! Any way I could keep the animation? Maybe check for any other active tabs and hide them? – user1425011 Apr 04 '14 at 01:17
  • Not sure, bootstrap's `fade` is a CSS transition: `opacity: 0;-webkit-transition: opacity .15s linear;transition: opacity .15s linear;`, and I don't really know what to do to interrupt one of those in a controlled fashion. Maybe if you write your own fading animation using jquery you can use it's queueing or chaining mechanisms. – Jorg Apr 04 '14 at 01:27
3

maybe you can try my solution. i try this solution in my code and it works. for hover solution, i follow solution from here: http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/

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

add this line (line 3 or after .. e.preventDefault(); .. )

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

and this line (after .. jQuery(this).tab('show') .. )

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

so the code become like this:

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');
});
Willi
  • 31
  • 3
0

What you could also do, if you want to keep the fading effect, is have a boolean to keep track of whether a tab is currently fading in, to prevent others from being triggered, this should work:

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');
});
Anton Abilov
  • 343
  • 3
  • 11
0

Found sollution for me. Default speed of fade animation is 0.15s. You need to reduse it to 0.1s. Now another picture don’t have time to appear before first disappear.

Spawnet
  • 1