当我为其父元素设置动画时，为什么我的UL消失？

声明：我对jQuery和JavaScript比较陌生。下面的openStatement（）函数在确定#statementTab尚未打开时执行。如果下面的代码没有足够的信息，只需查看下面的源代码。当我为其父元素设置动画时，为什么我的UL消失？

基本上，每当用户打开#statementTab时，包含各种选项卡的UL闪烁并消失。我想解决这个问题。

来源：http://www.cameronhermens.com/dbunkr/brochure.html

// The openStatement function opens the statement tab when the user clicks 
<a id="openIt"> (if the statement tab isn't already open).

function openStatement() { 
    $('#explore').animate({width: '70%'}, '200'); 
    $('#statementTab').animate({width: '213px'}, '1000'); 
};

// Here's the DIV. 
<div id="explore" class="brochure"> 
    <ul id="brochureTab"> 
    <li><a href="welcome.html" >welcome</a></li> 
    <li><a href="ourMission.html">our mission</a></li> 
    <li><a href="whatIsdBunkr.html">what is dBunkr</a></li> 
    </ul> 
</div> 

<div id="statementTab"> 
    <a id="openIt"> 
    <img class="opaque left-5" src="images/rightArrow.jpg" height="10" width="6" alt="Expand the Statement tab"> 
    <span class="statementBar">Statements</span> 
    </a> 
</div>

来源

2012-05-30 Cameron Mustafa Kittens Hermen

任何控制台错误？ 'animate（）'把一个数字作为'speed'参数，而不是我能说的字符串。 – elclanrs

的UL#brochureTab的动画过程中被隐藏因为#explore的动画，jQuery的正在申请的overflow: hidden风格吧。这个样式在完成动画后被删除。

一个快速解决方案（即不解决你已经设计了其他元素的方式）可以将样式overflow: visible !important;添加到#explore。

来源

2012-05-30 20:32:45

通过使用CSS top: -45px;，您可以在div#explore之外的ul#brochureTab。

每当动画div#explore使用jQuery .animate（）时，ul#brochureTab被“闪”，因为jQuery的.animate()自动切换到overflow:"hidden"在进行动画。

的解决方案是使用一个DIV作为一个包装的div#explore，并将它与视一眼你就div#explore了：

CSS

#wrapper { 
    background-color: #FFFFFF; 
    border: 3px solid #CCCCCC; 
    border-radius: 7px 7px 7px 7px; 
    box-shadow: 3px 3px 3px #CCCCCC; 
    float: left; 
    height: inherit; 
    padding: 5px; 
}

标记将是：

<div id="wrapper"> 
    <div id="explorer"> 
    <ul id="brochureTab"> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
    <div id="ui-tabs-3">...</div> 
    <div id="ui-tabs-10">...</div> 
    <div id="ui-tabs-12">...</div> 
    </div> 
    <div id="statementTab">...</div> 
</div>

并防止闪烁：

#brochureTab { 
    float: left; 
    left: 10px; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    /* top: -45px; remove this line */ 
} 

.ui-tabs-panel { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 2px solid #CCCCCC; 
    float: left; 
    left: 30px; 
    margin: 0 auto 30px; 
    min-height: 410px; 
    padding: 10px; 
    position: relative; 
    /* top: -20px; remove this line */ 
    width: 90%; 
    z-index: 1; 
}

要将当前的动画方法，需要做任何改变。

为您的新包装CSS，可能需要一些“调整”。

来源

2012-05-30 20:36:21 Zuul

当我为其父元素设置动画时，为什么我的UL消失？

回答

相关问题