title: How to make bootstrap 3RC tabs fade using tab('show')?
body: <p>I have the following <a href="http://jsfiddle.net/vgarcias/Jp42c/6/" rel="nofollow">code</a>.</p>
  
  <p>I was already able to have my tabs to open/close while clicking, but now the fade transition is not working.</p>
  
  <p>Does anybody know what I am doing wrong?</p>
  
  <p>Thank you.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="myTab" class="nav nav-tabs"&gt;
      &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="myTabContent" class="tab-content"&gt;
      &lt;div class="tab-pane active fade in" id="home"&gt;
          &lt;p&gt;Raw denim you probably haven't heard of them jean shorts Austin. &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane fade" id="profile"&gt;
          &lt;p&gt;Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.&lt;/p&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).off('click.tab.data-api');
  $(document).on('click.tab.data-api', '[data-toggle="tab"]', function (e) {
      e.preventDefault();
      var tab = $($(this).attr('href'));
      var activate = !tab.hasClass('active');
      $('div.tab-content&gt;div.tab-pane.active').removeClass('active');
      $('ul.nav.nav-tabs&gt;li.active').removeClass('active');
      if (activate) {
          $(this).tab('show');
      }
  });
  </code></pre>