我有两个集装箱舱,每排四个箱子。
点击一个按钮,我想第二个div向上滑动和隐藏或向下显示。
但是,当我现在单击它时,它只会出现或消失,不会设置幻灯片过渡的动画。研究表明,通常这是一个绝对定位的问题,但没有一个元素是绝对定位的。
js fiddle
:
$('.more').click(function() {
$('#group2').slideToggle(400);
})
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
}
#content-container {
clear: both;
}
.group-containers a {
background-color: blue;
height: 200px;
width: 23.5%;
float: left;
margin-top: 2%;
}
.group-containers a:not(:nth-child(4n)) {
margin-right: 2%;
}
.boxes {
background-color: blue !important;
height: 200px;
width: 100%;
float: left;
}
.boxes:not(:nth-child(4n)) {
margin-right: 2%;
}
.boxesTwo {
background-color: red !important;
height: 200px;
width: 100%;
float: left;
}
.boxesTwo:not(:nth-child(4n)) {
margin-right: 2%;
}
.labels {
background-color: blue;
height: 50px;
text-align: center;
color: white;
margin-top: 25%;
padding-top: 5%;
margin-left: 15%;
margin-right: 15%;
}
.overflow-group {
display: none;
}
.more {
height: 30px;
background-color: green;
width: 100%;
clear: both;
margin-top: 2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<section id="content-container">
<section class="group-sections">
<div class="group-containers" id="group1" style="display: block;">
<a href="">
<div class="boxes lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxes lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxes lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxes lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxes lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxes lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxes lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxes lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
</div>
<div class="group-containers overflow-group" id="group2" style="display: block;">
<a href="">
<div class="boxesTwo lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxesTwo lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxesTwo lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
<a href="">
<div class="boxesTwo lazy" style="background: url() no-repeat center">
<div class="labels">label</div>
</div>
</a>
</div>
<div class="more">See more</div>
</section>
</section>
</div>
