0
我有一个父高度为0的div和一个子div，但在顶部使用z-index。我想单击这个孩子div来扩大父div的高度。真的非常好用，但内部div消失在与父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除去股利：
的.css（ '溢出'， '看得见'）
拨动类之后...
希望这可以帮助别人出。 ：编辑：
堵这个地段成[的jsfiddle ]（http://jsfiddle.net/）会很有帮助。 – Moob
对于这个大代码，它更好地展示你的代码使用小提琴或什么的演示！ – UID
谢谢我会试试:) – DenisDeKat