.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/