将动画添加到宽度后，fadeIn和fadeOut停止

Question

我有一个由div元素组成的菜单，当你鼠标进入它旋转的菜单项并淡化下一个div.container嵌套元素但是当我向div.container的宽度添加一个动画时，fadeIn和fadeOut就会停止它旋转他们可以改变我的代码，以便它可以正常工作，我无法弄明白。 http://jsfiddle.net/EcgTa/

这是我的代码

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

这应该解决它：

.container{
 overflow: visible !important   
}

编辑：更多的研究发现了这个解释：

显然，当您为宽度设置动画时，jquery会将项目的过度设置为隐藏。这迫使它保持可见。

与此类似：JQuery: Children Disappear on Parent Size Animation