I've got simple jQuery tabs and wondering if there is a fairly simple way a make the tab content crossfade (or just fade in) while also having the tabs cycle through their active state along with their corresponding content. Here's my blogsite where I have the current tabs http://www.roscoandroy.com

Here's the jQuery:

/ JavaScript Document
$(document).ready(function() {

//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
My tabs structure is like this.

<ul class="tabs">
    <li><a href="#tab1">TAB1</a></li>
    <li><a href="#tab2">TAB2</a></li>
    <li><a href="#tab3">TAB3</a></li>
    <li><a href="#tab4">TAB4</a></li>
    <li><a href="#tab5">TAB5</a></li>
    <li><a href="#tab6">TAB6</span></a></li>

<div class="tab_container">
    <div id="tab1" class="tab_content">tab1 content</div>
    <div id="tab2" class="tab_content">tab2 content</div>
    <div id="tab3" class="tab_content">tab3 content<</div>
    <div id="tab4" class="tab_content">tab4 content<</div>
    <div id="tab5" class="tab_content">tab5 content<</div>
    <div id="tab6" class="tab_content">tab6 content<</div>
    </div> <!--end tab_container -->
THANKS for any help!