Jquery .动画和DIV'；s混乱

我试图做一个简单的“点击Div->隐藏Div->显示另一个Div”过程，由于一些奇怪的原因，

.animate

功能不能正常工作

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

动画持续时间决定了div在这里被隐藏的时间（不知道为什么），这意味着如果我让它保持1秒，div将在1秒后恢复到可见状态，它不会隐藏它超过确定的动画持续时间，然后恢复到原始状态

以下是div结构：

HTML:

（其他CSS类与

.block1

相同，只是有一个不同的名称和位置

---

有什么帮助吗？

我现在看到了问题所在。您的元素绝对处于位置，这导致了您的问题

这里的红边是#main

之所以会出现这种情况，是因为jQuery在设置动画时将overflow-y和overflow-x设置为hidden。因此，绝对定位的元素在动画过程中是“隐藏”的，但在移除这些属性后，将在动画结束时重新显示

在对动画的回调中，我会将

#main

中的所有内容设置为隐藏

---

很难理解你的要求。你能发布一个演示吗？我不知道如何解决这个问题，因为div必须是绝对的（为了正确的位置）。有什么建议吗？也许你可以给出溢出：隐藏在css中，比如@sandeep-感谢你们两个。

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

#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;
}