jquery - .animate 和 DIV 的混淆

Question

我正在尝试制作一个简单的“点击 Div -> 隐藏 DIV -> 显示另一个 DIV”过程，但由于某些奇怪的原因，.animate 函数无法正常工作。

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

动画持续时间决定了 div 在这里被隐藏的时间(不知道为什么)意味着如果我将它保持在 1 秒，div 将在 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 相同，只是具有差异名称和位置。

有什么帮助吗？

Answer 1

我现在看到问题了。您的元素绝对定位导致您的问题。

这里的红色边框是#main

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

发生这种情况是因为 jQuery 在设置动画时将 overflow-y 和 overflow-x 设置为隐藏。因此，您的绝对定位元素在动画期间是“隐藏”的，但一旦这些属性被删除，就会在动画结束时重新显示。

在动画的回调中，我会将 #main 中的所有内容设置为隐藏。

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