1

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

  • When the user hovers over the menu icon,
    • the menu icon to disappear
    • the text "Problems" to fadeIn its place
  • When the user moves their mouse away,
    • the text "Problem" to disappear
    • the menu icon to fadeIn its place

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

Community
  • 1
  • 1
14wml
  • 4,048
  • 11
  • 49
  • 97

2 Answers2

1

Use css height property for the menu icon/problem.

Rassel
  • 33
  • 3
1

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

larz
  • 5,724
  • 2
  • 11
  • 20
  • @Iarz could you post what exactly you added to the CSS to make the jumpiness disappear? Because I don't see any new code under `#Menu-Button{}` – 14wml Jul 19 '16 at 14:33
  • @15ongm I just added `height: 69px;`. I added it separately because I didn't see your initial styling block for it. My mistake. – larz Jul 19 '16 at 14:46