我一直在尝试制作此 div 的动画,使其在单击按钮时向下滑动,但动画全都搞砸了。它在 div 打开或关闭时出现故障。
我已经尝试添加 position:relative 和 overflow:hidden 到它,但它似乎不起作用(请记住我也在使用 Bootstrap)。
$(document).ready(function(){
$(".faqOuter").click(function(){
$(".faqInner").slideToggle("slow");
});
});
p{
vertical-align: middle;
margin: 0 !important;
}
.faqOuter{
color: white;
background-color: #262626;
text-align: center;
font-size: 20px !important;
height: 30px;
border: solid;
border-color: #262626;
padding: 0 0 5px 0;
}
.faqInner{
padding: 40px 35px 40px 40px !important;
position: relative !important;
border: solid;
border-color: #F3F3F3;
display: none;
overflow: hidden;
min-height: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>
<div class="faqInner col-md-12">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
</div>
最佳答案
您需要从填充中删除 !important
,因为它会使过渡期间的高度计算变得困惑。
$(document).ready(function() {
$(".faqOuter").click(function() {
$(".faqInner").slideToggle("slow");
});
});
p {
vertical-align: middle;
margin: 0 !important;
}
.faqOuter {
color: white;
background-color: #262626;
text-align: center;
font-size: 20px !important;
height: 30px;
border: solid;
border-color: #262626;
padding: 0 0 5px 0;
}
.faqInner {
padding: 40px 35px 40px 40px;
border: solid;
display: none;
border-color: #F3F3F3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>
<div class="faqInner col-md-12">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
</div>
关于javascript - Div 动画不会向下平移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47976978/