Question

我一直试图动画这个div，当点击一个按钮时向下滑动，但动画都搞砸了。 div打开或关闭时会出现故障。

我尝试添加位置：relative和overflow：隐藏到它，但它似乎没有工作（请记住我也使用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>

Answer 1

您需要从填充中删除!important，因为它会在转换过程中计算高度。

＆＃13;

$(document).ready(function() {
  $(".faqOuter").click(function() {
    $(".faqInner").slideToggle("slow");
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Div动画不会向下平移

1 个答案: