New to JS/jquery, div not hiding as I expect it to (or unhiding improperly)

Question

You can see the issue at http://bmuller.com/index_new.html. Clicking on a location name brings up a home "button" in the bottom left. Clicking that home button returns to the original page load layout, and is supposed to hide the home button. However, as soon as the cursor is moved off the home button, it reappears and returns to its hover behavior (separately defined).

html:

<div id="home">Home</div>

JS:

function nav_click() {
    $('.navitem').click(function(){
        ...
        $('#home').fadeTo(200,0.5);
        ...
    });
}

$(document).ready(function(){
    nav_click();

    $('#home').hover(
        function() {
            $('#home').fadeTo(100,1)
        },
        function() {
            $('#home').fadeTo(100,0.5)
        }
    );

    $('#home').click(function(){
        $('html').removeAttr('style');
        $('#navbar').removeAttr('style');
        $('.navdate').removeAttr('style');
        $('.navitem').fadeIn(200);
        $('#pagebrand').fadeIn(200);
        $('.arrow').removeAttr('style');
        $('#home').hide();
        nav_hover();
        nav_click();
    });
});    

Let me know if you need to see more code to answer this. And feel free to tell me why anything else looks wrong/dumb too.

Thanks!

Answer 1

If you put a breakpoint in the last part of #home.click(), you see that it is hidden. Before continuing, you can move the mouse outside the screen and the button is hidden. Put another breakpoint near $('#home').fadeTo(100,0.5)} and you see it gets invoked when your mouse hovers the page, which will thus automatically make the home button appear. Inspecting jQuery it appears to be on mouseout, probably part of the hover mechanism. As suggested in the comments, use more CSS instead of JS.

See if this gets you started:

#home, .navitem {
    cursor: pointer;
}

#home {
    opacity: 0.5;
    -webkit-transition: opacity linear 100ms;
}
#home:hover {
    opacity: 1;
}

#navbar.docked {
    top: auto;
    left: 0px;
    ....
}

JS

function attach_nav() {
    $('.navitem').click(function(){
        $('#navbar').addClass('docked');
    });

Answer 2

First of all I think you could do the hover thing via css.

If you want to keep the jquery hover function then you have to unbind the mouseleave event within your click event or simply add a 'clicked' class to the element.

For the 2nd approach I made a little jsfiddy

Making the home button visible by clicking on .navitem (in fiddle called .clickme)

$('.clickme').on('click', function (e) {
    e.preventDefault();
    $('.menu').removeClass('clicked').show();
});

On click hide the menu again and add a class 'clicked'

    $('.menu').on('click', function (e) {
    e.preventDefault();
    $(this).attr('style', '');
    $(this).addClass('clicked').hide();
});

On hover check if its clicked:

if (!$(this).hasClass('clicked'))...