jquery - jquery在动画高度之间切换
问题描述
我试图在一个班级的两个高度之间切换并让它们动画,我尝试了以下方法:
$('.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>
我究竟做错了什么?
解决方案
你可以用简单的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>
推荐阅读
- python - 如何使 pyplot.subplots 中的图像更大
- ruby-on-rails - Autoprefixer 不支持 Node v0.10.48。更新它
- r - 如何在不更改原始数据集的情况下在 r 中使用多个替换?
- variables - Qlik Sense 中是否有另一种方法可以默认显示最近几周的数据以及用于更改您正在查看的星期的过滤器?
- azure - 我们可以在没有管理员权限的情况下在 VSCode 中本地运行 azure 函数吗
- python - python set 命令以不同的执行顺序产生不相等的结果
- html - 根据属性值替换 HTML 标签
- android - 如何从 api(地图类型)获取数据以获取下拉选项
- c# - C#- 自定义创建日期范围的 LINQ 分组
- reactjs - Ionic 4 在 android 5.1 上反应白屏