fadeIn and fadeOut stops after adding animation to width
<p>I have a menu made of div elements when you mouseenter the menu-item it rotates and fades the next div.container nested elements but when i add an animation to the width of the div.container the fadeIn and fadeOut stops it's just rotates them what going with that can somebody change my code so it will work properly i can't figure it out. <a href="http://jsfiddle.net/EcgTa/" rel="nofollow">http://jsfiddle.net/EcgTa/</a></p>

<p>here is my code</p>

<pre><code>function rotateZIndex(currentMenuItem) {
    var $currentContent = $('#' + $(currentMenuItem).attr('class').split(' ')[1]),
    $contentContainer = $currentContent.closest('.container'),
    $contentItems = $('&gt; div', $contentContainer);

   $contentItems.not($currentContent)
   .css('z-index', function (i, val) { return val - 1 })
   .fadeOut();
   $currentContent.css('z-index', $contentItems.length).fadeIn();
}

$('.menu-item').mouseenter(function () {                        
    $(this).closest('.container').next('.container').animate({ width: 200 });
}).mouseleave(function () {
    $(this).closest('.container').next('.container').stop(false, true);
}).mouseover(function() {
    rotateZIndex(this);
});


&lt;div id="container1" class="container" 
    style="width:220px; position:relative; float:left"&gt;
    &lt;div class="menu-item menu-1-1"&gt;
        &lt;div class="menu-item-middle"&gt;
            &lt;a href="#"&gt;&lt;span class="header" 
                style="font-family:Verdana; font-size:.95em; font-weight:bold"&gt;Technology&lt;/span&gt;
            &lt;span class="description" 
                style="font-family:Arial; font-size:.7em; color:#0b83bb"&gt;Computers &amp;amp; Office 
            Supplies&lt;/span&gt; &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-left"&gt;
            &lt;div class="item-corner"&gt;
            &lt;/div&gt;
            &lt;div class="item-icon"&gt;
                &lt;img alt="" height="36" src="images/spacer.gif" width="36" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-right"&gt;
            &lt;img alt="" height="44" src="images/spacer.gif" width="26" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="menu-item menu-1-2"&gt;
        &lt;div class="menu-item-middle"&gt;
            &lt;a href="#"&gt;&lt;span class="header" 
                style="font-family:Verdana; font-size:.95em; font-weight:bold"&gt;Interests&lt;/span&gt;
            &lt;span class="description" 
                style="font-family:Arial; font-size:.7em; color:#0b83bb"&gt;Movies Books &amp;amp; 
            Music&lt;/span&gt; &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-left"&gt;
            &lt;div class="item-corner"&gt;
            &lt;/div&gt;
            &lt;div class="item-icon"&gt;
                &lt;img alt="" height="36" src="images/spacer.gif" width="36" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-right"&gt;
            &lt;img alt="" height="44" src="images/spacer.gif" width="26" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="menu-item menu-1-3"&gt;
        &lt;div class="menu-item-middle"&gt;
            &lt;a href="#"&gt;&lt;span class="header" 
                style="font-family:Verdana; font-size:.95em; font-weight:bold"&gt;Entertainment&lt;/span&gt;
            &lt;span class="description" 
                style="font-family:Arial; font-size:.7em; color:#0b83bb"&gt;Sofware &amp;amp; Games&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-left"&gt;
            &lt;div class="item-corner"&gt;
            &lt;/div&gt;
            &lt;div class="item-icon"&gt;
                &lt;img alt="" height="36" src="images/spacer.gif" width="36" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-right"&gt;
            &lt;img alt="" height="44" src="images/spacer.gif" width="26" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="menu-item menu-1-4"&gt;
        &lt;div class="menu-item-middle"&gt;
            &lt;a href="#"&gt;&lt;span class="header" 
                style="font-family:Verdana; font-size:.95em; font-weight:bold"&gt;Kids&lt;/span&gt;
            &lt;span class="description" 
                style="font-family:Arial; font-size:.7em; color:#0b83bb"&gt;Toys &amp;amp; Games&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-left"&gt;
            &lt;div class="item-corner"&gt;
            &lt;/div&gt;
            &lt;div class="item-icon"&gt;
                &lt;img alt="" height="36" src="images/spacer.gif" width="36" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-right"&gt;
            &lt;img alt="" height="44" src="images/spacer.gif" width="26" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="menu-item menu-1-5"&gt;
        &lt;div class="menu-item-middle"&gt;
            &lt;a href="#"&gt;&lt;span class="header" 
                style="font-family:Verdana; font-size:.95em; font-weight:bold"&gt;Clothing&lt;/span&gt;
            &lt;span class="description" 
                style="font-family:Arial; font-size:.7em; color:#0b83bb"&gt;Shoes Jewelry &amp;amp; 
            Apparel&lt;/span&gt; &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-left"&gt;
            &lt;div class="item-corner"&gt;
            &lt;/div&gt;
            &lt;div class="item-icon"&gt;
                &lt;img alt="" height="36" src="images/spacer.gif" width="36" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-right"&gt;
            &lt;img alt="" height="44" src="images/spacer.gif" width="26" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="menu-item menu-1-6"&gt;
        &lt;div class="menu-item-middle"&gt;
            &lt;a href="#"&gt;&lt;span class="header" 
                style="font-family:Verdana; font-size:.95em; font-weight:bold"&gt;Pharmacy&lt;/span&gt;
            &lt;span class="description" 
                style="font-family:Arial; font-size:.7em; color:#0b83bb"&gt;Health &amp;amp; Beauty&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-left"&gt;
            &lt;div class="item-corner"&gt;
            &lt;/div&gt;
            &lt;div class="item-icon"&gt;
                &lt;img alt="" height="36" src="images/spacer.gif" width="36" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-right"&gt;
            &lt;img alt="" height="44" src="images/spacer.gif" width="26" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="menu-item menu-1-7"&gt;
        &lt;div class="menu-item-middle"&gt;
            &lt;a href="#"&gt;&lt;span class="header" 
                style="font-family:Verdana; font-size:.95em; font-weight:bold"&gt;Home&lt;/span&gt;
            &lt;span class="description" 
                style="font-family:Arial; font-size:.7em; color:#0b83bb"&gt;Furniture Outdoors 
            &amp;amp; Garden&lt;/span&gt; &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-left"&gt;
            &lt;div class="item-corner"&gt;
            &lt;/div&gt;
            &lt;div class="item-icon"&gt;
                &lt;img alt="" height="36" src="images/spacer.gif" width="36" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="menu-item-right"&gt;
            &lt;img alt="" height="44" src="images/spacer.gif" width="26" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="container2" class="container" style="position:relative; float:left"&gt;
    &lt;div id="menu-1-1" 
        style="height:300px; margin-left:2px; position:absolute; background-color:Aqua; z-index:0"&gt;
        Some Text&lt;/div&gt;
    &lt;div id="menu-1-2" 
        style="height:280px; margin-left:2px; position:absolute; background-color:Blue; z-index:1"&gt;
        Some Text&lt;/div&gt;
    &lt;div id="menu-1-3" 
        style="height:260px; margin-left:2px; position:absolute; background-color:Fuchsia; z-index:2"&gt;
        Some Text&lt;/div&gt;
    &lt;div id="menu-1-4" 
        style="height:240px; margin-left:2px; position:absolute; background-color:Gray; z-index:3"&gt;
        Some Text&lt;/div&gt;
    &lt;div id="menu-1-5" 
        style="height:220px; margin-left:2px; position:absolute; background-color:Green; z-index:4"&gt;
        Some Text&lt;/div&gt;
    &lt;div id="menu-1-6" 
        style="height:200px; margin-left:2px; position:absolute; background-color:Lime; z-index:5"&gt;
        Some Text&lt;/div&gt;
    &lt;div id="menu-1-7" 
        style="height:180px; margin-left:2px; position:absolute; background-color:Maroon; z-index:6"&gt;
        Some Text&lt;/div&gt;
&lt;/div&gt;

div.menu-item
   {
       padding-left:41px; padding-right: 25px; cursor:hand
   }    
   div.menu-item-left 
   {
       width:41px; height:44px; float:left; position:relative;right:41px; margin-left:-100%
   }
   div.menu-item-left .item-corner 
   {
       width:3px; height:44px; float:left; 
   }
   div.menu-item-left .item-corner.selected
   {
       background:url('images/Menu_Item_Corner.jpg') no-repeat;
   }
   div.menu-item-left .item-icon 
   {
       float:right;
   }
   div.menu-item-left .item-icon.selected
   {
        background:url('images/Menu_Item_Middle.jpg') repeat-x;
   }
   div.menu-item-left .item-icon img
   {
       margin-top:3px; margin-bottom:3px; border:1px solid #969ba0
   }
   div.menu-item-middle 
   {
       width:100%; height:44px; position:relative; float:left
   }
   div.menu-item-middle.selected
   {
       background:url(images/Menu_Item_Middle.jpg) repeat-x;
   }       
   div.menu-item-middle a
   {
       display:block; text-decoration:none; color:#0b83bb
   }
   div.menu-item-middle span.header 
   {
       display:block; margin-top:6px; margin-left:3px
   }
   div.menu-item-middle span.description 
   {
       display:block; margin-left:3px
   }
   div.menu-item-right 
   {
       width:26px; height:44px; float:left; position:relative; margin-right:-26px; background:url(images/Menu_Item_Arrow.jpg) no-repeat;
   }
   div.menu-item-right.selected 
   {
        background:url('images/Menu_Item_Arrow_Over.jpg') no-repeat;
   }
</code></pre>
