Question

我有两个内容非常相似的div。单击按钮时，我希望第一个div消失，第二个div出现在完全相同的位置。它们没有恒定的高度，但它们应具有相同的自动高度，因为它们具有非常相似的内容。

我实现了这个例子来演示这个问题。在此片段中，您可以看到单击按钮后，div将替换为淡入/淡出动画。问题是下面的内容（在此示例中为text text）在淡入/淡出过程中上下波动，这会对用户体验产生负面影响。

假设这些div下面有很多内容，它看起来不太好。

在替换过程中，如果所有内容都不低于div“闪烁”，那么实现此行为的最佳方法是什么？

$("#clicker").click(function() {
  if ($('.first').is(':visible')) {
    $('.first').fadeOut();
    $('.second').fadeIn();
  } else {
    $('.second').fadeOut();
    $('.first').fadeIn();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button id="clicker">Click me</button>

<div style="background-color:yellow;display:none" class="first">first content</div>
<div style="background-color:red" class="second">second content</div>

<div id="more_stuff_here">
  text text<br> text text
</div>

Answer 1

这种情况正在发生，因为您对fade和display:none都应用了display:block效果。所以它会扰乱你的布局，因为在动画的某个时刻，这两个元素都变成了display:block。

因此解决方案是在执行display:none时不需要淡入淡出效果。只需使用hide()。

因此请使用hide()代替fadeOut()。 fadeIn()会动画您的内容。

Stack Snippet

$("#clicker").click(function() {
  if ($('.first').is(':visible')) {
    $('.first').hide();
    $('.second').fadeIn();
  } else {
    $('.second').hide();
    $('.first').fadeIn();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button id="clicker">Click me</button>
<div style="background-color:yellow;display:none" class="first">first content</div>
<div style="background-color:red" class="second">second content</div>
<div id="more_stuff_here">
  text text<br> text text
</div>

Answer 2

$("#clicker").click( 
        function()
        {
            if ($('.first').is(':visible')) {
              $('.first').fadeOut();
              $('.second').fadeIn();
            }
            else {
              $('.second').fadeOut();
              $('.first').fadeIn();
            }
        }
    );

.first, .second {
   position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button id="clicker">Click me</button>

<div style="background-color:yellow;display:none" class="first">
  first content
</div>

<div style="background-color:red" class="second">
  second content
</div>

<div id="more_stuff_here">
text text<br>
text text
</div>

Answer 3

我更喜欢你将.first和.second包装在一个高度恒定的div中。

<div class="container"><div class="first">....</div><div class="second">....</div></div>

在替换过程中更换两个没有底部内容闪烁的div

3 个答案: