使用 jquery animate 时我的选项卡消失了答案

【问题标题】：My tab disappears when using jquery animate使用 jquery animate 时我的选项卡消失了
【发布时间】：2014-04-08 21:56:31
【问题描述】：

我正在制作一个全高菜单，当您单击选项卡时，它会从屏幕右侧滑出。

您会注意到，当您单击 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/

【问题讨论】：

感谢您添加小提琴。我想帮忙，但需要从概念上知道你想要完成什么。这应该是一个动画打开还是关闭的盒子？
我的错。基本上，当您单击选项卡时，会从右侧滑出（打开）一个小菜单。

标签： jquery

【解决方案1】：

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

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

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

进一步说明

请参阅上面链接中尼克的回答以获得进一步的解释：

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

jQuery documentation 中有一条关于溢出和高度/宽度的注释。因此，请确保您在各种屏幕宽度、div 宽度等下全面测试代码。=)

【讨论】：

这对我不起作用。我将对我有用的解决方案添加到您链接到的 SO 问题中。