.animate和DIV的困惑

Question

我試圖做一個簡單的「點擊事業部 - >隱藏DIV - >顯示另一個DIV」的過程和一些奇怪的原因，.animate功能不能正常工作。

jQuery("#main").animate({ 
    height: "0px" 
    }, 1200); 

動畫持續時間是確定的DIV被藏在這裏的時間（不知道爲什麼），意思是如果我離開它在1秒後，1秒鐘格將回到他的可見狀態，它不不會將它隱藏起來，而不是確定的動畫持續時間，然後回到原始狀態。

這裏是div結構：

HTML：

<div id="container"> 
<div id="main"> 

<div class="block1"> 
<div class="icon"></div> 
<div class="shadow"></div> 
<div class="text"></div> 
</div> 

<div class="block2"> 
<div class="icon"></div> 
<div class="shadow"></div> 
<div class="text"></div> 
</div> 

<div class="block3"> 
<div class="icon"></div> 
<div class="shadow"></div> 
<div class="text"></div> 
</div> 

<div class="block4"> 
<div class="icon"></div> 
<div class="shadow"></div> 
<div class="text"></div> 
</div> 

<div class="center_orb"></div> 
</div> 

CSS：

#container { 
    position:relative; 
    margin: 0 0 0 4px; 
    padding: 0 0 0 0; 
    width:1150px; 
    height: 590px; 
} 

#main { 
    position:relative; 
    height: 590px; 
} 

.block1 { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 563px; 
    height: 282px; 
    background:url(../../images/tuts_block.png); 
    cursor: pointer; 
} 

.block1:hover { 
    background-position: 0px 282px; 
} 

.block1 .icon { 
    background:url(../../images/tuts_iconUsage.png); 
    position:absolute; 
    top: 35px; 
    left: 50%; 
    margin-left: -70px; 
    width: 141px; 
    height: 159px; 
} 

.block1 .text { 
    background:url(../../images/tuts_textUsage.png); 
    position:absolute; 
    top: 235px; 
    left: 50%; 
    margin-left: -124px; 
    width: 248px; 
    height: 33px; 
} 

（其它CSS類同樣喜歡.block1只是一個diff名稱和位置。

任何幫助嗎？

Answer 1

我現在看到的問題。你的元素是絕對定位導致你的問題。

紅色這裏邊框#main

http://jsfiddle.net/6hXDB/1/

這是因爲jQuery的設置溢出-γ和溢出-X，同時動畫隱藏。因此，您的絕對定位元素在動畫期間是「隱藏的」，但是一旦這些屬性被移除，則會在動畫結束時重新顯示。

在回調到我設置裏面的一切#main到隱藏的動畫。

http://jsfiddle.net/6hXDB/2/