Question

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. http://jsfiddle.net/EcgTa/

here is my code

function rotateZIndex(currentMenuItem) {
    var $currentContent = $('#' + $(currentMenuItem).attr('class').split(' ')[1]),
    $contentContainer = $currentContent.closest('.container'),
    $contentItems = $('> 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);
});


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

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;
   }

Answer 1

This should fix it:

.container{
 overflow: visible !important   
}

EDIT: a bit more research turned up this explanation:

Apparently when you animate the width, jquery sets the overlow of the item to hidden. This forces it to stay visible.

Similar to this: JQuery: Children Disappear on Parent Size Animation