Ich habe ein Eltern-Div mit der Höhe 0 und ein Kind-Div im Inneren, aber oben mit Z-Index. Ich möchte, dass dieses untergeordnete Div beim Klicken die Höhe des übergeordneten Div erweitert. Funktioniert wirklich gut, aber das innere Div verschwindet parallel zum übergeordneten Div hinter den anderen Divs und wenn die Animation fertig ist, wird es wieder oben angezeigt. Im Grunde versteckt sich das Kind während der Animation hinter den anderen Abschnitten. Hier ist mein Code:

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

Hier ist mein 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>

Und hier ist mein 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%;

}

Irgendwelche Ideen, wie ich mein Hex oben halten kann?

Zögern Sie, die Ausgabe zu DEMO:http://jsfiddle.net/xQVjq/

: EDIT: Nur für den Fall, dass jemand dies tun möchte, ohne das div aus dem seccion zu entfernen, war es mir möglich, das div während der Animation oben zu halten:

.css ('Überlauf', 'sichtbar')

gleich nach dem Toggle-Kurs ...

Hoffe das hilft jemandem aus. :BEARBEITEN: