在向宽度添加动画后，淡出和淡出停止

fadeIn and fadeOut stops after adding animation to width

本文关键字：淡出 动画 添加      更新时间：2023-09-26

我有一个由div元素组成的菜单当你鼠标进入菜单项时它会旋转并淡出下一个div。container嵌套元素但是当我为div。container的宽度添加动画时淡出和淡出停止它只是旋转它们这是怎么做的有人能改变我的代码使它正常工作吗我不能弄清楚。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;
   }

这应该可以修复它:

.container{
 overflow: visible !important   
}

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

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

与此类似:JQuery: Children Disappear on Parent Size Animation
相关文章：