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

【问题标题】：How to preserve space in page layout while reveal/hide elements?如何在显示/隐藏元素时保留页面布局中的空间？
【发布时间】：2016-07-19 04:59:07
【问题描述】：

发生了什么

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

【问题讨论】：

cick?不应该是click吗？

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

@Iarz 你能发布你添加到 CSS 中以使跳跃消失的内容吗？因为我在#Menu-Button{}下没有看到任何新代码
@15ongm 我刚刚添加了height: 69px;。我单独添加了它，因为我没有看到你的初始样式块。我的错。

【解决方案2】：

对菜单图标/问题使用 CSS 高度属性。

【讨论】：