CODEWITHSUNDEEP
javascriptjqueryhtmlcss
14wml
14wml

Reputation: 4166

How to preserve space in page layout while reveal/hide elements?

What is happening

enter image description here

Using .hide() and .fadeIn(200) is creating this jumpy effect, which I don't want.

What I want to happen

So I looked at this post which talked about using visibility to show/hide elements. I feel like using visibility might be the key. The only thing is I want the menu icon and "Problems" to replace each other, and w/out the display set to none, they are stacked on top of each other like so:

enter image description here

So if I were to use visibility, there would be gaps created by the hidden element.

My Code

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

Upvotes: 1

Views: 74

Answers (2)

larz
larz

Reputation: 5766

If you add a static height to #Menu-Button the jumpy effect disappears. See updated jsfiddle - https://jsfiddle.net/utuj88gg/1/

Upvotes: 1

Rassel
Rassel

Reputation: 33

Use css height property for the menu icon/problem.

Upvotes: 1

Related Questions