최근에는 매끄러운 첫 페이지를 만들려고 노력했습니다. 이 바이올린 에서 내가 한 일을 볼 수 있습니다 .
클릭하면 펼쳐집니다. 그러나 애니메이션이 올 때마다 안에 있는 <h2>
태그가 BUSINESS PC
사라지고 <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];
});
});
jQuery animate()
는 overflow: hidden
기본적으로 모든 애니메이션 중에 추가 됩니다.
이 문제를 해결하는 간단한 방법 overflow: visible !important;
은 애니메이션되는 요소 를 설정 하는 것입니다.
귀하의 경우에는 그 .mbox
클래스입니다.
.mbox {
/* other css */
overflow: visible !important;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다