Div внутри Div прячется, когда внешний div оживляет

0

У меня есть родительский div с высотой 0 и дочерний 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/

: EDIT: на всякий случай кто-то хочет сделать это, не удаляя div из seccion, я смог поддерживать div сверху во время анимации, используя это:

.css('overflow', 'visible')

сразу после класса переключения...

Надеюсь, это поможет кому-то. :РЕДАКТИРОВАТЬ:

  • 1
    Подключение этой партии в jsFiddle было бы полезно.
  • 0
    Для этого большого кода лучше показать демонстрацию вашего кода, используя fiddle или что-то еще !!!
Показать ещё 5 комментариев
Теги:

2 ответа

1

Поскольку div анимации jQuery задает свойство overflow hidden (иначе он не сможет ограничивать, насколько он высок). Затем, по завершении, он возвращает overflow до своего предыдущего значения.

Если вы переместите шестнадцатеричную кнопку за пределы раздела расширения/свертывания, она будет работать.

например: http://jsfiddle.net/NChK3/

Поделиться
  • 0
    Спасибо, хочу увеличить ваш ответ, но мой представитель ничего не значит, так как я новичок в stackoverflow ...
  • 0
    Думаю, мне следовало бы остановиться на том, что я надеялся сделать. Я хотел, чтобы гекс сместился вниз как центр в этом разделе с анимацией, используя top: 50% - вне скрытия это не работает. Кроме того, то, что сделал melc, закомментировав относительное положение postiton, портит реальный большой HTML, так как есть много разделов, и я хочу, чтобы гекс центрировался в этом разделе. Есть еще идеи?
Показать ещё 1 комментарий
1

Если вы переместите шестерку за пределы div, у вас не будет проблемы, и она будет выглядеть так же хорошо

http://jsfiddle.net/xQVjq/1/

<!-- 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 -->
Поделиться
  • 0
    Спасибо, хочу увеличить ваш ответ, но мой представитель ничего не значит, так как я новичок в stackoverflow ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню