使用jquery动画时，我的选项卡消失

Question

我正在创建一个全高度菜单，当您单击选项卡时，该菜单将从屏幕右侧滑出。

您会注意到，当您单击openerthingie（选项卡）时，它会消失，直到动画完成然后重新出现。

为什么？我怎样才能让它与容器滑动？

HTML：

<div id="rightwrapper" class="closed">
    <div id="openertabthingie">=</div>
</div>

<div id="leftwrapper" class="closed">
</div>

CSS：

#rightwrapper { position: relative; width: 0; height: 100%; float: right; background: #222; }
#rightwrapper #openertabthingie { position: absolute; height: 60px; width: 74px; top: 145px; left: -74px; background: #111; cursor: pointer; z-index: 1000; }
#leftwrapper { height: 100%; overflow: auto; position: fixed; width: 100%; background: #ccc;     }

所有jquery都在这里摆弄： http://jsfiddle.net/9k578/

Answer 1

jQuery的animate函数在某些情况下会强制overflow: hidden元素样式（请参阅jQuery .animate() forces style "overflow:hidden"）。

您可以在所有相关位置向CSS添加overflow: visible，例如：

$('#rightwrapper').animate({
    width: "+=250",
    overflow: 'visible' // ADDED CODE
}

进一步说明

请参阅上面链接中的Nick的答案，以获得进一步的解释：

  

将溢出设置为隐藏的原因是，动画中的元素将在动画中包含在元素中。例如，如果减少元素的宽度，其内容可能会尝试拉长并从底部“掉落”。

jQuery documentation中有关于溢出和高度/宽度的注释。因此，请确保以各种屏幕宽度，div宽度等完全测试代码。=）