SlideToggle не анимация

Question

У меня есть два контейнерных элемента, содержащих поля по четыре в ряд.

При нажатии кнопки я хочу, чтобы второй 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>