Search code examples
javascriptjqueryhtmlmouseentermouseleave

JQuery mouseenter() and mouseleave()

So I have got this demo navigation, which has a small button on the side and when you hover the button, it slides the menu into the window. though I have got the hover working, but now when the mouse leaves, it's still open. how to fix this? I'm pretty new to jQuery by the way

here's the html:

<div id="demoNav">
    <button class="open"></button>
    <ul>
        <li><a href="index.html">Home Pagina</a></li>
        <li><a href="product.html">Product Pagina</a></li>
        <li><a href="bestel.html">Bestel Pagina</a></li>
    </ul>
</div>

And my jQuery:

$("#demoNav").mouseenter(function(){
       $("#demoNav").animate({marginLeft:'0px'}, 500)
});

If you need more info, just tell me, I'll provide more codes.

Solution

  • Try this:

    $("#demoNav").hover(

function () {
    $(this).animate({
        marginLeft: '0px'
    }, 500)
},

function () {
    $(this).animate({
        marginLeft: '50px'
    }, 500)
});