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

Question

免责声明：我是jQuery和JavaScript的新手。 只要确定#statementTab尚未打开，下面的openStatement（）函数就会执行。 如果下面的代码不足以提供足够的信息，只需查看下面的源代码即可。

基本上，每当用户打开#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>

Answer 1

UL#brochureTab在动画过程中被隐藏，因为在#explore进行动画处理时，jQuery正在应用一种overflow: hidden样式overflow: hidden将其overflow: hidden 。 然后在完成动画后删除此样式。

一种快速的解决方案（即，不解决其余元素的样式问题）将添加样式overflow: visible !important; #explore 。

Answer 2

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

每当使用jQuery .animate（）为div#explore设置动画时， 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为包装器，可能需要一些“调整”。