SlideToggle不动画

Question

我有两个容器div，包含四排连续的盒子。

点击一个按钮，我希望第二个div向上滑动并隐藏或显示。

但是，当我现在单击它时，它只会显示或消失，并且不会为幻灯片过渡设置动画。研究表明，这通常是一个绝对定位的问题，但没有一个元素是绝对定位的。

此外，如果我将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>

Answer 1

问题在于你在float上的.group-containers a。这是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>

Answer 2

这似乎不是一个问题。这可能是由于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>