隐藏元素

Question

假设我们在HTML文件中有三个元素，其中一个元素（中间的; .div2）被隐藏。我试图取消隐藏隐藏元素（.div2）并通过使用jQuery单击按钮来隐藏第一个元素（.div1）。但问题是当我隐藏第一个元素（.div1）并取消隐藏隐藏元素（.div2）时，下一个元素（第三个; .div3）向上滑动并与unhidden元素混合。

我该怎么做才能解决这个问题？

＆＃13;

＆＃13;

$(function($) {
  $(".myButton").click(function() {
    $(".div1").fadeOut();
    $(".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;

＆＃13;

＆＃13;

混乱的结果如同图像： The result after clicking the button

如您所见，地图后面有一个表单字段（元素2）（元素3），我希望地图停留在表单字段的底部而不是向上滑动。

Answer 1

使用Jquery CSS来隐藏元素。最好使用不透明度来隐藏/显示和使用CSS过渡效果。

Answer 2

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

Answer 3

由于fadeIn()和fadeOut()都是动画的，并且您在同一时间和动画的某个时刻使用它们，因此它们同时成为display:block，这就是您遇到问题的原因。 ..

因此，请使用hide()代替fadeOut()或fadeOut(0)

Stack Snippet

＆＃13;

＆＃13;

$(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;

＆＃13;

＆＃13;

Answer 4

修改

我创建了jsfiddle来演示确切的要求。我希望这会有所帮助： https://jsfiddle.net/c817r1pt/28/

以下原始答案：

问题是fadeOut会将display:none;添加到元素中，这将导致它从文档流中删除，因此没有任何样式可以对它起作用。结果，它下方的元素将向上滑动。诀窍是元素应该保持不可见（不删除）。这是我使用opacity:0;隐藏元素的简单解决方案：

注意：我使用CSS过渡来创建淡入淡出效果。

＆＃13;

＆＃13;

$(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;

＆＃13;

＆＃13;