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

我有一个由div元素组成的菜单，当你用鼠标点击菜单项时，它会旋转并淡出下一个div.container嵌套元素，但当我向div.container的宽度添加动画时，淡出和淡出会停止，它只是旋转它们，这是怎么回事？有人能改变我的代码，使其正常工作吗

这是我的密码

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

函数旋转索引（currentMenuItem）{
变量$currentContent=$（'#'+$（currentMenuItem）.attr（'class'）.split（''）[1]），
$contentContainer=$currentContent.closest（'.container'），
$contentItems=$（'>div'，$contentContainer）；
$contentItems.not（$currentContent）
.css（'z-index'，函数（i，val）{return val-1}）
.fadeOut（）；
$currentContent.css（'z-index'，$contentItems.length）.fadeIn（）；
}
$（'.menu项'）.mouseenter（函数（）{
$（this）.closest（'.container'）.next（'.container'）.animate（{width:200}）；
}).mouseleave（函数（）{
$（this）.closest（'.container'）。next（'.container'）。stop（false，true）；
}).mouseover（函数（）{
旋转指数（this）；
});
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
分区菜单项
{
左侧填充：41px；右侧填充：25px；光标：手
}    
div.menu-item-left
{
宽度：41px；高度：44px；浮动：左侧；位置：相对；右侧：41px；左边距：-100%
}
div.menu-item-left.项目角
{
宽度：3px；高度：44px；浮动：左侧；
}
div.menu-item-left.item-corner.selected
{
背景：url（'images/Menu\u Item\u Corner.jpg'）不重复；
}
div.menu-item-left.item图标
{
浮动：对；
}
div.menu-item-left.item-icon.selected
{
背景：url（'images/Menu\u Item\u Middle.jpg'）重复-x；
}
div.menu-item-left.item图标img
{
页边距顶部：3px；页边距底部：3px；边框：1px实心#969ba0
}
div.menu-item-middle
{
宽度：100%；高度：44px；位置：相对；浮动：左侧
}
div.menu-item-middle.selected
{
背景：url（images/Menu\u Item\u Middle.jpg）repeat-x；
}       
分区菜单项中间a
{
显示：块；文本装饰：无；颜色：#0b83bb
}
div.menu-item-middle span.header
{
显示：块；页边距顶部：6px；页边距左侧：3px
}
div.menu-item-middle span.description
{
显示：块；左边距：3倍
}
div.menu-item-right
{
宽度：26px；高度：44px；浮动：左侧；位置：相对；边距右侧：-26px；背景：url（图像/菜单项\箭头.jpg）不重复；
}
div.menu-item-right.selected
{
背景：url（'images/Menu\u Item\u Arrow\u Over.jpg'）不重复；
}

这应该可以解决：

.container{
 overflow: visible !important   
}

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

显然，在设置宽度动画时，jquery会将项目的上下部分设置为隐藏。这迫使它保持可见

---

与此类似：

请仅发布代码的相关部分mouseover动画会导致元素输入MouseAve事件，该事件会触发fadein淡出效果停止，那么我该怎么做才能修复该问题。我在mouseenter上设置了rotateZindex函数，但仍然不起作用。它不会触发mouseleave，在那里粘贴一个警报，你会看到它没有触发。这是一个奇怪的例子。它在mouseenter上工作得非常好，但我刚将动画添加到.container（设置宽度动画）fadeIn淡出停止谢谢，但我想隐藏嵌套在.container元素中的元素，因此框的左侧有宽度，因为我想将left属性从-200设置为0，我想我必须添加或包装父元素以隐藏.container元素