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

怎么了



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

最佳答案

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

关于javascript - 在显示/隐藏元素时如何在页面布局中保留空间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38445782/