here's the code i've got to make some tabbed content on my website:


$(document).ready(function(){
$('#headingHome div').hide(); // Hide all divs
$('#headingHome div:first').show(); // Show the first div

$('.ticker_buttonP a:first').addClass('active'); // Set the class of the first link to active

$('.ticker_buttonP a').click(function(){ //When any link is clicked
$('.ticker_buttonP a').removeClass('active'); // Remove active class from all links
$(this).addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#headingHome div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});
});

and my html (all content removed for size's sake):

<div id="headingHome">

<div id="first"></div><!-- /first -->

<div id="second"></div><!-- /second -->

<div id="third"></div><!-- /third -->

<div id="fourth"></div><!-- /fourth -->

<div id="fifth"></div><!-- /fifth -->


<p class="ticker_buttonP">
<a href="#first"></a>
<a href="#second"></a>
<a href="#third"></a>
<a href="#fourth"></a>
<a href="#fifth"></a>
</p>

</div><!-- /headingHome -->


that works fine so far, however i want the content to fade in and out when the tabs change, and i also want the tabs to rotate automatically like seen on this site: http://www.sosfactory.com/

I'm new to this, and I cant find anything on the net about it that i can understand enough to put it together. could anyone help me, please?

many thanks