外部div动画时，Div中的Div隐藏 [英] Div within Div hides when outer div animates
问题描述
我有一个高度为0的父div，其中有一个子div，但最上面使用的是z-index.单击此子div扩展父div的高度时，我想要这个子div.实际上效果很好，但是内部div消失在与父div平行的其他div后面，并且动画完成后，它又重新显示在顶部.因此，基本上，在动画制作过程中，子div会隐藏在其他部分的后面.这是我的代码:
I have a parent div with height 0 and a child div within, but on top using z-index. I want this child div when clicked to expand the height of the parent div. Works great really but the inner div disappears behind the other divs parallel to the parent div and when the animation is done it shows it back on top again. So basically, during the animation the child div hides behind the other sections. Here is my 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>
这是我的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%;
}
有什么主意如何让我的六角形保持高位吗?
Any ideas how to keep my hex up on top?
演示该问题的方法: http://jsfiddle.net/xQVjq/
FIDDLE TO DEMO THE ISSUE: http://jsfiddle.net/xQVjq/
: 万一有人想这样做而又不想从seccion中删除div，我可以使用以下方法在动画过程中将div保持在顶部:
: Just in case someone wants to do this without removing the div from the seccion I was able to maintain the div on top during the animation using this:
.css('overflow'，'visible')
.css('overflow', 'visible')
切换类之后...
希望这可以帮助某人. :
Hope this helps someone out. :
推荐答案
如果将十六进制移到div之外，则不会出现问题，并且效果会很好
If you move the Hex outside the div you wont have the issue, and it will look just as good
<!-- Redes Sociales -->
<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 id="seccionGrid" class="colorGrey seccionGridOn">
</section>
<!-- Redes Sociales -->
这篇关于外部div动画时，Div中的Div隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
