Question

Hey guys, I got this JS code and want to add a slight fade effect when switching tabs, so it looks a little bit smoother.

<script type="text/javascript">
$(document).ready(function(){
  initTabs();
});

function initTabs() {
  $('#tabMenu a').bind('click',function(e) {
  e.preventDefault();
  var thref = $(this).attr("href").replace(/#/, '');
  $('#tabMenu a').removeClass('active');
  $(this).addClass('active');
  $('#tabContent div.content').removeClass('active');
  $('#'+thref).addClass('active');
  });
}

And this is the corresponding HTML:

<ul id="tabMenu">
    <li><a id="tab_1" class="active" href="#1">Tab 1</a></li>
    <li><a id="tab_2" class="" href="#2">Tab 2</a></li>
</ul>
<div id="tabContent">
    <div id="1" class="content active"></div>
    <div id="2" class="content"></div>
</div>

Answer 1

Try this:

replace:

$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');

by:

$('#tabContent div.content[id!='+thref+']').fadeOut('slow', function(){
      $('#'+thref).fadeIn('slow');
});