How to make tabs fade between user selection? (JQuery)

I have a div with two tabs on it functioning by Javascript. Right now when a user hovers over a tab the div's content switches immediately to the tab's content. I have JQuery already on the site and would like to have it so that the tab's content fade between each other when the user selects a new tab.

Please help me make the tab's content fade between each other using the JQuery fading functions. Thank you!

HTML:

<div class="tab_menu_container">
        <ul id="tab_menu">
            <li class="first"><a rel="tab_content_secure">Connections</a></li>
            <li><a rel="tab_content_notice">Notice of Access</a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="tab_container">
        <div class="tab_container_in">
            <ul id="tab_content_secure" class="tab_content_list">
    Sample content for Tab #1                                   
            </ul>

            <ul id="tab_content_notice" class="tab_content_list">
    Sample content for Tab #2
            </ul>
        </div>
    </div>

Javascript:

var menuscript={
    disabletablinks: false, 
    currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), 

definemenu:function(tabid, dselected){
    this[tabid+"-menuitems"]=null
    this.addEvent(window, function(){menuscript.init(tabid, dselected)}, "load")
},

showsubmenu:function(tabid, targetitem){
    var menuitems=this[tabid+"-menuitems"]
 for (i=0; i<menuitems.length; i++){
        menuitems[i].className=""
        if (typeof menuitems[i].hasSubContent!="undefined")
            document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
    }
    targetitem.className="current"
    if (typeof targetitem.hasSubContent!="undefined")
        document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

isSelected:function(menuurl){
    var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
    return (menuscript.currentpageurl==menuurl)
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    if (target.addEventListener)
        target.addEventListener(tasktype, functionref, false)
    else if (target.attachEvent)
        target.attachEvent(tasktype, functionref)
},

init:function(tabid, dselected){
    var menuitems=document.getElementById(tabid).getElementsByTagName("a")
    this[tabid+"-menuitems"]=menuitems
    for (var x=0; x<menuitems.length; x++){
        if (menuitems[x].getAttribute("rel")){
 开发者_如何学编程           this[tabid+"-menuitems"][x].hasSubContent=true
            if (menuscript.disabletablinks)
                menuitems[x].onclick=function(){return false}
        }
        else //for items without a submenu, add onMouseout effect
            menuitems[x].onmouseout=function(){this.className=""}
        menuitems[x].onmouseover=function(){menuscript.showsubmenu(tabid, this)}
        if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
            menuscript.showsubmenu(tabid, menuitems[x])
            var setalready=true
        }
        else if (parseInt(dselected)==x)
            menuscript.showsubmenu(tabid, menuitems[x])
    }
}
}

        menuscript.definemenu("tab_menu", 0)

You could use something along the lines of this to show/hide content:

$('#tab_menu a').click(function(){
    $tabContents.filter(':visible').fadeOut();
    $tabContents.filter('#' + $(this).attr('rel')).fadeIn();    
});

Please note that I'd recommend to make use of CSS to initially hide all tab contents but e.g. the first, rather than doing this with Javascript. Also using an <ul> element as container without list elements inside (<li>) is not recommendable to my knowledge.