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

Question

我有一个高度为 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/

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

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

在切换类之后...

希望这对某人有所帮助。 :编辑:

Answer 1

当 div 动画化时，jQuery 将其 overflow 属性设置为 hidden(否则它无法限制它出现的高度)。然后，在完成时，它将 overflow 返回到它之前的值。

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

例如:http://jsfiddle.net/NChK3/