如何在显示/隐藏元素时保留页面布局中的空间？

Question

发生了什么

使用ShouldQueue和.hide()创造了这种我不想要的跳跃效果。

我想要发生什么

• 当用户将鼠标悬停在菜单图标上时，
  • 菜单图标消失
  • 文字＆＃34;问题＆＃34;褪去它的位置
• 当用户将鼠标移开时，
  • 文字＆＃34;问题＆＃34;消失
  • 菜单图标淡出其位置

所以我看了this post，其中讨论了使用可见性来显示/隐藏元素。我觉得使用可见性可能是关键。唯一的问题是我想要菜单图标和＆＃34;问题＆＃34;为了取代彼此，并且.fadeIn(200)设置为display，它们就像这样堆叠在一起：

因此，如果我使用可见性，隐藏元素会产生间隙。

我的代码

HTML 的

none

CSS

<div id="Menu-Header" class="header">
                <button id="Menu-Button" type="button" class="btn btn-default btn-lg button-menu" aria-label="Menu"> 
                    <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
                    <h1>Problems</h1>
                </button>
            </div>

的jQuery

#Menu-Header h1 {
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    display: none;
}

JSFiddle

Answer 1

使用css height属性作为菜单图标/问题。

Answer 2

如果向#Menu-Button添加静态高度，则跳跃效果会消失。请参阅更新的jsfiddle - https://jsfiddle.net/utuj88gg/1/