假设我们在HTML文件中有三个元素,其中一个元素(中间的; .div2)被隐藏。我试图取消隐藏隐藏元素(.div2)并通过使用jQuery单击按钮来隐藏第一个元素(.div1)。但问题是当我隐藏第一个元素(.div1)并取消隐藏隐藏元素(.div2)时,下一个元素(第三个; .div3)向上滑动并与unhidden元素混合。
我该怎么做才能解决这个问题?
$(function($) {
$(".myButton").click(function() {
$(".div1").fadeOut();
$(".div2").fadeIn(500);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">Hide</button>
<div class="div1">Element 1 - will be hidden</div>
<div class="div2" style="display: none;">Element 2 - the hidden element</div>
<div class="div3">Element 3 - the one which will slide up and mess with element 2 </div>
&#13;
混乱的结果如同图像: The result after clicking the button
如您所见,地图后面有一个表单字段(元素2)(元素3),我希望地图停留在表单字段的底部而不是向上滑动。
答案 0 :(得分:0)
使用Jquery CSS来隐藏元素。最好使用不透明度来隐藏/显示和使用CSS过渡效果。
答案 1 :(得分:0)
使用fadeOut
的回调参数 - 在动画结束时调用它。这样,只要第一个div被完全隐藏,第二个div就会开始显示,因此总会有一个div占据垂直空间:
$(function($) {
$(".myButton").click(function() {
$(".div1").fadeOut(function () {
$(".div2").fadeIn(500);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">Hide</button>
<div class="div1">Element 1 - will be hidden</div>
<div class="div2" style="display: none;">Element 2 - the hidden element</div>
<div class="div3">Element 3 - the one which will slide up and mess with element 2 </div>
答案 2 :(得分:0)
由于fadeIn()
和fadeOut()
都是动画的,并且您在同一时间和动画的某个时刻使用它们,因此它们同时成为display:block
,这就是您遇到问题的原因。 ..
因此,请使用hide()
代替fadeOut()
或fadeOut(0)
Stack Snippet
$(function($) {
$(".myButton").click(function() {
$(".div1").hide();
// or $(".div1").fadeOut(0);
$(".div2").fadeIn(500);
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">Hide</button>
<div class="div1">Element 1 - will be hidden</div>
<div class="div2" style="display: none;">Element 2 - the hidden element</div>
<div class="div3">Element 3 - the one which will slide up and mess with element 2 </div>
&#13;
答案 3 :(得分:0)
修改强>
我创建了jsfiddle来演示确切的要求。我希望这会有所帮助: https://jsfiddle.net/c817r1pt/28/
以下原始答案:
问题是fadeOut会将display:none;
添加到元素中,这将导致它从文档流中删除,因此没有任何样式可以对它起作用。结果,它下方的元素将向上滑动。诀窍是元素应该保持不可见(不删除)。这是我使用opacity:0;
隐藏元素的简单解决方案:
注意:我使用CSS过渡来创建淡入淡出效果。
$(function () {
$('button').on('click', function () {
$('.div1,.div2').toggleClass('transp');
});
});
&#13;
div {
opacity: 1;
transition: opacity 0.6s ease;
}
div.transp {
opacity: 0;
}
button {
margin-top: 10px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1 transp">This is first div</div>
<div class="div2">This is second div</div>
<div class="div3">This div is always visible</div>
<button type="button">Toggle div1 and div2</div>
&#13;