使用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在某些情況下為overflow: hidden元素樣式（請參見jQuery .animate（）強制樣式為“ overflow：hidden” ）。

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

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

進一步說明

有關更多說明，請參見上面鏈接中尼克的回答：

溢出被設置為隱藏的原因是，被動畫化的元素中的元素將被包含在被動畫化的元素之內。 例如，如果減小元素的寬度，則其內容可能會嘗試拉長並“掉出”底部。

jQuery 文檔中有關於溢出和高度/寬度的注釋。 因此，請確保您在各種屏幕寬度，div寬度等中完全測試了代碼。=）