SlideToggle 没有动画
SlideToggle Not Animating
我有两个容器 divs,其中包含一排四个盒子。
单击一个按钮后,我希望第二个 div 向上滑动并隐藏或向下滑动并显示。
但是,当我现在单击它时,它只会出现或消失,不会为幻灯片切换设置动画。研究表明,这通常是绝对定位的问题,但 none 的元素是绝对定位的。
此外,如果我将 onclick 侦听器应用于第一个 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>
看来问题不大。这可能是由于 jsfiddle。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.more').click(function(){
$('#group2').slideToggle(400);
})
});
</script>
</head>
<body>
<style>
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%;
}
</style>
<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>
</body>
</html>
问题出在您在 .group-containers a
上的 float
上。这是一个 display: inline-block
的例子。
$('.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: 22%;
/*float: left;*/
margin-top: 2%;
display: inline-block;
}
.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>
我有两个容器 divs,其中包含一排四个盒子。
单击一个按钮后,我希望第二个 div 向上滑动并隐藏或向下滑动并显示。
但是,当我现在单击它时,它只会出现或消失,不会为幻灯片切换设置动画。研究表明,这通常是绝对定位的问题,但 none 的元素是绝对定位的。
此外,如果我将 onclick 侦听器应用于第一个 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>
看来问题不大。这可能是由于 jsfiddle。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.more').click(function(){
$('#group2').slideToggle(400);
})
});
</script>
</head>
<body>
<style>
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%;
}
</style>
<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>
</body>
</html>
问题出在您在 .group-containers a
上的 float
上。这是一个 display: inline-block
的例子。
$('.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: 22%;
/*float: left;*/
margin-top: 2%;
display: inline-block;
}
.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>