当外部 div 动画时，Div 内的 Div 隐藏

我有一个高度为 0 的父 div 和一个子 div，但在顶部使用 z-index。我想要这个子 div 在单击时扩展父 div 的高度。效果确实很好，但是内部 div 消失在与父 div 平行的其他 div 后面，当动画完成时，它会再次显示在顶部。所以基本上，在动画过程中，子 div 隐藏在其他部分的后面。这是我的代码：

    <!-- Seccion on top of animated div -->
    <section class="backgroundBlack">
        <div class"indexContacto">
        <p>lorem ipsum other stuff here</p>       
        </div>
    </section>
    <!-- Contact Section -->

    <hr class="hrBlackToGrey" />

    <!-- Redes Sociales -->
    <section id="seccionGrid" class="colorGrey seccionGridOn">

            <div id="hex4" class="hex hex-4">
                <div class="inner">
                        <h5>Síguenos a trevés de redes sociales</h5>
                </div>  
                <div class="corner-1"></div>
                <div class="corner-2"></div>        
            </div>
    </section>
    <!-- Redes Sociales -->

    <hr class="hrGreyToBlack" />

    <!-- Footer -->
    <section class="sectionBlack">
        <div id="footer">
        <p>lorem ipsum stuff</p>
    </div>
    </section>

这是我的JS：

<!-- Scripts Header -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<!-- Move Hexes Around -->
<script>
    $(function() {
        $("#hex4").click(function() {
            <!--$("#hex1").toggleClass('hex-1-Off', 1000);-->
            $("#seccionGrid").toggleClass('seccionGridOff', 1000);
            return false;
        });
    });
</script>

这是我的CSS：

#seccionGrid{
    position: relative;
}

.seccionGridOn {
    padding: 0px;
    margin: 0px;
    height:0px;
    overflow: visible;
}

.seccionGridOff{
    height:500px;
}

.hex {
    width:150px;
    height:86px;
    background-repeat: no-repeat;
    background-position: 50% 50%;           
    -webkit-background-size: auto 173px;                            
    -moz-background-size: auto 173px;                           
    -ms-background-size: auto 173px;                            
    -o-background-size: auto 173px;                         
    position: absolute;
    margin: 0px;
    left: 50%;
    margin-left: -75px;
    margin-top: -43px;
    text-align:center;
    z-index: 5;
    overflow: visible;
}

    .hex.hex-gap {
        margin-left: 86px;
    }

    .hex a {
        display:block;
        width: 100%;
        height:100%;
        text-indent:-9999em;
        position:absolute;
        top:0;
        left:0;
    }

    .hex .corner-1,
    .hex .corner-2 {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: inherit;                                
        z-index:-2;                     
        overflow:hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;         
        backface-visibility: hidden;            
    }

    .hex .corner-1 {
        z-index:-1;
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .hex .corner-2 {
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }

    .hex .corner-1:before,
    .hex .corner-2:before {
        width: 173px;
        height: 173px;
      content: '';
      position: absolute;
      background: inherit;
      top:0;
      left: 0;
      z-index: 1;
      background: inherit;
      background-repeat:no-repeat;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden; 
        backface-visibility: hidden;                  
    }           


    .hex .corner-1:before {
        -webkit-transform: rotate(-60deg) translate(-87px, 0px);
        -moz-transform: rotate(-60deg) translate(-87px, 0px);
        -ms-transform: rotate(-60deg) translate(-87px, 0px);
        -o-transform: rotate(-60deg) translate(-87px, 0px);
        transform: rotate(-60deg) translate(-87px, 0px);    
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
    }           

    .hex .corner-2:before {
        -webkit-transform: rotate(60deg) translate(-48px, -11px);
        -moz-transform: rotate(60deg) translate(-48px, -11px);
        -ms-transform: rotate(60deg) translate(-48px, -11px);
        -o-transform: rotate(60deg) translate(-48px, -11px);
        transform: rotate(60deg) translate(-48px, -11px);   
        bottom:0;
    }       



    .hex .inner {       
        color:#eee;
    }

    .hex h4 {
        font-family: 'Josefin Sans', sans-serif;        
        margin:0;           
    }

    .hex h5 {
        font-color: #333;
        font-family: 'Josefin Sans', sans-serif;        
        margin:0;
        font-size: 20px;            
    }

    .hex hr {
        border:0;
        border-top:1px solid #eee;
        width:60%;
        margin:15px auto;
    }

    .hex p {
        font-size:16px;
        font-family: 'Kotta One', serif;
        width:80%;
        margin:0 auto;
    }


    .hex.hex-4 {
        background: #ffb400;
    }


.hex-1-Off {
    opacity: 0;
    margin-top: 86px;
    margin-left: 86px;
}

.hexCenter {
    position: absolute;
    top: 50%;

}

有什么想法可以让我的六角形保持在顶部吗？

Fiddle 来演示这个问题：http://jsfiddle.net/xQVjq/ http://jsfiddle.net/xQVjq/

：编辑： 以防万一有人想在不从部分中删除 div 的情况下执行此操作，我可以使用以下命令在动画期间将 div 保持在顶部：

.css('溢出', '可见')

就在切换课之后...

希望这可以帮助别人。 ：编辑：

当 div 动画 jQuery 设置它的overflow财产给hidden（否则它将无法限制它出现的高度）。然后，完成后，它返回overflow恢复到之前的值。

如果您将十六进制按钮移到展开/折叠部分之外，它将起作用。

eg: http://jsfiddle.net/NChK3/ http://jsfiddle.net/NChK3/