Fading Tabs with Jquery

I am currently using this function to add and remove classes which shows and hides my tabs perfectly. I would like to elaborate on this so the contents fade in...

Here is my HTML

<ul id='tabs'>
    <li class='current'>
        <a class='tabLink' href='#'>Title</a>
        <div class='tabInfo'>
            <p>Text Description</p>
        </div>
    </li>
    <li>
        <a class='tabLink' href='#'>Title</a>
        <div class='tabInfo'>
            <p>Text Description</p>
        </div>
    </li>
</ul>

And my JS

$('a.tabLink').click(function(){
    $tabs.removeClass('current');
    $(this).parent().addClass('current');
});

AND CSS

#tabs {
    clear: both;
    position: relative;
}
a.tabLink {
    color: #58585A;
    display: block;
    font-size: 13px;
    padding: 3px 5px;
}
a.tabLink:hover {
    color: #FFFFFF;
}
.tabInfo {
    background: none repeat scroll 0 0 #000000;
    color: #CCCCCC;
    display: none;
    font-size: 12px;
    height开发者_运维百科: 176px;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
}
.current .tabLink {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: block;
}
.current .tabInfo {
    display: block;
}

You can accomplish this by loading the jQuery UI library, and adding a second argument to your addClass invokation, the duration of the animation.

$('a.tabLink').click(function(){
    // the style effects will be applied over a period of one second
    $tabs.removeClass('current',1000);
    $(this).parent().addClass('current',1000);
}); 

See also: the addClass page of the jQuery UI documentation.

$('a.tabLink').click(function(){
    $tabs.removeClass('current');
    $(this).parent().addClass('current');
    $(this).next().fadeIn()
});

It kind of depends on how your CSS looks, but this might work.

$('a.tabLink').click(function(){
      $(".tabInfo", $tabs)
        .stop().fadeOut("slow", function() { //Fadeout old content
          $tabs.removeClass('current');
          $(this).parent().addClass('current');
          $(this).next(".tabLink").fadeIn();
      });
});

$('a.tabLink').click(function(){
    $tabs.removeClass('current');
    $(this).parent().addClass('current');
    $(this).parent().find('.tabInfo').fadeIn();
});

If i understand correctly, you want to fade the content in. If the content is hidden, which it appears it would be, using a fadeIn() on the tabInfo div would be appropriate.

Instead of adding the class current to the parent, you'll need to fade in the appropriate tabInfo.

$('a.tabLink').click(function(e){
  $('.tabInfo').css('display','none');
  $(this).parent().find('.tabInfo').fadeIn();
});