jquery用动画在高度之间切换答案

【问题标题】：jquery toggling between heights with animationjquery用动画在高度之间切换
【发布时间】：2018-12-19 06:11:34
【问题描述】：

我试图在一个班级的两个高度之间切换并让它们动画，我尝试了以下方法：

$('.architectural-films').bind('click', function(){
            $(".section1").toggle(function(){
                             $(".section1").animate({height:"500px"});
                        },function(){
                             $(".section1").animate({height:"0px"});
                        });
            return false;
        });

但它根本不起作用，没有动画，高度也没有变化。

这是类的 CSS

.section1{
height: 0px;
}

这里是html

<section class="section1">

<!--content here -->
</section>

我做错了什么？

【问题讨论】：

标签： jquery html css jquery-animate

【解决方案1】：

你可以用简单的 css 和 .toggleClass 来做到这一点

$('.architectural-films').bind('click', function(){
    $(".section1").toggleClass("toggle");
});

.section1{
background:red;
height: 0px;
transition: height 0.25s ease-out;
}
.toggle{
   height: 500px;
    transition: height 0.25s ease-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section1">

<!--content here -->
</section>
<button class="architectural-films">click me</button>

【讨论】：

缓入有效，缓出无效:(
移除溢出：可见的作品，但现在不是我的所有内容都出现了。
.toggle { height: 3000px; transition: height 0.25s ease-in; }
我可以用 min-height 代替吗？
您的代码最终可以正常工作，但我改用了 max-height 并将其设置为 5000px 我只是不明白为什么，我认为 5000px 的 max-height 会很大，但事实并非如此出于某种原因非常适合。