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

Question

发生了什么

使用 .hide() 和 .fadeIn(200) 会产生这种跳跃效果，这是我不想要的。

我想要发生的事情

• 当用户将鼠标悬停在菜单图标上时，
  • 要消失的菜单图标
  • 文本“问题”淡出其位置
• 当用户将鼠标移开时，
  • 文本“问题”消失
  • 淡入淡出的菜单图标

所以我查看了this post其中谈到使用可见性来显示/隐藏元素。我觉得使用可见性可能是关键。唯一的问题是我希望菜单图标和“问题”相互替换，并且没有将 display 设置为 none，它们相互堆叠像这样:

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

我的代码

HTML

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

CSS

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

jQuery

$('#Menu-Button').on('mouseenter cick', function(){
    $(this).children('.glyphicon-menu-hamburger').hide();
    $(this).children('h1').fadeIn(200);
});

$('#Menu-Button').on('mouseleave', function(){
    $(this).children('h1').hide();
    $(this).children('.glyphicon-menu-hamburger').fadeIn(200);
});

JSFiddle

Answer 1

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