CODEWITHSUNDEEP
javascriptjquery
Dominik
Dominik

Reputation: 23

Adding a fade effect to CSS/JS tabs

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>

Upvotes: 2

Views: 2501

Answers (2)

manji
manji

Reputation: 47978

Try this:

replace:

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

by:

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

Upvotes: 0

Abe Miessler
Abe Miessler

Reputation: 85056

Look at the FadeIn and FadeOut methods.

Using them is fairly straightforward:

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

Upvotes: 1

Related Questions