如何防止这个H2标签消失一半

Question

我最近试图制作一个流畅的首页。你可以看到我在这个小提琴上做了什么。

如果单击它，它将通过展开打开。但是每当动画出现时，带有BUSINESS PC的<h2>标签就会消失，<section>不会覆盖它。

我怎样才能防止它这样做？

.HTML：

<section class="mbox mbox_closed" id="effect1_1">
         <h2>BUSINESS PC</h2>
        <div class="mbox_content" id="effect2_1">
             <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr! 
                <span>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</span>
            </h3>
            <p>Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <hr>
        <img src="http://www.club-3d.com/tl_files/club3d/uploads/en/content/Accesories/CAC-1052/cac-1052_use_01.png" alt="Testbild">
        <!--<div class="mbox_bar"></div>-->
    </section>

.CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 body, html {
    height:100%;
    padding:0;
    margin:0;
    background:#5cafff;
    font-family:'Open Sans', sans-serif;
}
.mbox {
    z-index: 1;
    margin: 2em;
    position:relative;
    background: #ff1a00;
    background: linear-gradient(to right, #ffffff 33%, #ff1a00 100%);
    border: 1px solid #fff;
    height:200px;
    clear:both;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
.mbox_closed:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
    -moz-box-shadow:  0px 0px 12px 8px rgb(128,128,128);
    -webkit-box-shadow:  0px 0px 12px 8px rgb(128,128,128);
    box-shadow:  0px 0px 12px 8px rgb(128,128,128);
}
.mbox_active {
    z-index: 1;
    margin: 2em;
    position:relative;
    background: #ff1a00;
    background: linear-gradient(to right, #ffffff 33%, #ff1a00 100%);
    border: 1px solid #fff;
    height:200px;
    clear:both;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
}
.mbox * {
    padding:0;
    margin:0;
}
.mbox_content {
    z-index: 2;
    float:left;
    padding: 20px;
    background: #ffffff;
    width:60%;
    height:160px;
    overflow: hidden;
    overflow-y: hidden;
}
.mbox img {
    z-index:-1;
    position:absolute;
    right:0;
    max-height:100%;
}
.mbox hr {
    z-index: 2;
    float:left;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: 30px;
    border-width: 15px 0 15px 20px;
    border-color: transparent transparent transparent #ffffff;
}
.mbox_bar {
    z-index: 2;
    float:right;
    width: 30;
    height: 100%;
    border-style: solid;
    border-width: 0 10px 3px 3px;
    border-color: #ffffff #ffffff #ffffff #ffffff;
}
.mbox h2 {
    text-transform: uppercase;
    font-weight:normal;
    font-size:1em;
    top:-0.7em;
    left: 0.5em;
    position:absolute;
    color:#fff;
    background:#ff1a00;
    padding:0 1em;
    border:1px solid #fff;
    border-radius:1em;
}
.mbox_content h3 {
    font-size:1.4em;
    color:#666;
    border-left:2px solid #ccc;
    padding-left: 1em;
    margin-bottom:0.5em;
}
.mbox_content h3 span {
    margin-top:0.5em;
    display:block;
    font-size:0.7em;
    text-transform: uppercase;
    font-weight:normal;
}

.JS：

var state = []
$(function() {
        state[1] = true;
        $( "#effect1_1" ).click(function() {
            if ( state[1] ) {
                $( "#effect1_1" ).animate({
                    height: 600
                }, 1000 );
                $( "#effect2_1" ).animate({
                    height: 560
                }, 1000 );
                $( "#effect1_1" ).removeClass( "mbox_closed" ).addClass( "mbox_active" );
            } else {
                $( "#effect1_1" ).animate({
                    height: 200
                }, 1000 );
                $( "#effect2_1" ).animate({
                    height: 160
                }, 1000 );
                $( "#effect1_1" ).removeClass( "mbox_active" ).addClass( "mbox_closed" );
            }
        state[1] = !state[1];
        });
});

Answer 1

您必须覆盖 jQuery animate 在动画元素上设置的overflow: hidden;。

.mbox {
    overflow: visible !important;
}

Answer 2

jQuery animate()在所有动画期间默认添加overflow: hidden。

解决此问题的一种简单方法是在正在设置动画的元素上设置overflow: visible !important;。

在您的情况下，它是.mbox类。

.mbox {
    /* other css */
    overflow: visible !important;
}

JSFiddle Demo

Answer 3

将以下内容添加到 CSS 中

#effect1_1{
overflow:visible !important;
}

这背后的原因是，当您对高度进行动画处理时，它会自动在动画时间设置隐藏溢出，然后将其重置为可见，这就是为什么它在动画时消失的原因。