SlideToggle 没有动画

Question

我有两个容器 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>

Answer 1

看来问题不大。这可能是由于 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>

Answer 2

问题出在您在 .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>

SlideToggle 没有动画

SlideToggle Not Animating

javascript

jquery

html

css

slidetoggle