JQuery fade transitions

HTML

<script src="http://malsup.github.com/jquery.corner.js"></script>
<div id="framebg">
    <div id="textheader">
         <h1>Page Header</h1>

    </div>
    <div id="navbox_outer">
        <div id="navbox_inner">
            <div class="hmnav" id="wnr01">Nav_1<a href="#"><span class="link-spanner"> </span></a>
            </div>
            <div class="hmnav" id="wnr02">Nav_2<a href="#"><span class="link-spanner"> </span></a>
            </div>
            <div class="hmnav" id="wnr03">Nav_3<a href="#"><span class="link-spanner"> </span></a>
            </div>
            <div class="hmnav" id="wnr04">Nav_4<a href="#"><span class="link-spanner"> </span></a>
            </div>
            <div class="hmnav" id="wnr05">Nav_5<a href="#"><span class="link-spanner"> </span></a>
            </div>
        </div>
    </div>
    <div class="swcontent" id="_wnr00">Default text</div>
    <div class="swcontent" id="_wnr01">Content_1</div>
    <div class="swcontent" id="_wnr02">Content_2</div>
    <div class="swcontent" id="_wnr03">Content_3</div>
    <div class="swcontent" id="_wnr04">Content_4</div>
    <div class="swcontent" id="_wnr05">Content_5</div>
</div>

CSS

#textheader {
    height: 60px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    left:80px;
    text-align: left;
    background-repeat: repeat;
}
#textheader h1 {
    font-size: 2.7em;
    font-family: Calibri, Arial, sans-serif;
    margin:0px;
    line-height: 60px;
    font-weight: normal;
    color:#013449;
}
#framebg {
    width: 1260px;
    height: 427px;
    position: absolute;
    background-color: #f8f8f8;
    overflow: hidden;
}
#navbox_outer {
    width: 60px;
    position: relative;
    left: 0px;
    top: -60px;
    height: 200px;
    background-color: rgb(53, 64, 38);
}
#navbox_inner {
    width: 56px;
    position: relative;
    left: 2px;
    top: 2px;
    height: 196px;
    background-color: rgb(223, 229, 215);
}
.hmnav {
    padding:5px;
    height: 30px;
    width: 100%;
    position:relative;
    background-repeat:no-repeat;
    left:auto;
    right:auto;
}
.swcontent {
    position: absolute;
    left: 100px;
    top: 80px;
    display: none;
    width: 50%;
    font-family: Calibri, Arial, sans-serif;
}
.swcontent#_wnr00 {
    display:block;
}
div.swcontent, div.swcontent p, div.swcontent a, div.swcontent ul, div.swcontent li {
    font-family: Calibri, Arial, sans-serif;
    font-size:18px;
}
.link-spanner {
    position:absolute;
    width:100%;
    height:79px;
    top:0;
    left: 0;
    z-index: 5;
    /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif 
  background-image: url('empty.gif');*/
}

JavaScript

$(document).ready(function () {
    $('#navbox_inner')
        .corner("round 12px")
        .parent()
        .css({padding:1})
        .corner("round 14px")

    $('#navbox_inner').on({
        mouseenter: function () {
            $('#_wnr00').stop().fadeOut();
            $('#_' + this.id).stop(0, 1).fadeIn(4000);
        },
        mouseleave: function(){
            $('#_' + this.id).stop(0, 1).fadeOut(4000);
            $('#_wnr00').stop(0, 1).fadeIn();
        }
    },'.hmnav');
});