CODEWITHSUNDEEP
javascriptjqueryhtmlmouseentermouseleave
user1814458
user1814458

Reputation: 13

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.

Upvotes: 0

Views: 1183

Answers (6)

Priya
Priya

Reputation: 1554

might be this solution works

 $('#demoNav .open').on("mouseenter", function(){  $(this).parent().animate({marginLeft:'0px'}, 500); });
 $('#demoNav').on("mouseleave", function(){  $(this).animate({marginLeft:'50px'}, 500); });

this will activate the pane on hover of button, but when you leave the div, it'll act again making a left move

Upvotes: 0

GeekyCoder
GeekyCoder

Reputation: 428

you coded for mouseenter but forgot to code for mouseleave event

add these lines in jQuery

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

working example here:

http://jsfiddle.net/EP6wR/

but i will suggest use hover method which is cleaner

syntax: $(selector).hover(handlerIn, handlerOut)

Upvotes: 0

palaѕн
palaѕн

Reputation: 73966

Try this:

$("#demoNav").hover(

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

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

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324820

You haven't actually told it to hide again.

That said, I'd like to suggest this CSS alternative:

#demoNav {
    transition:margin-left 0.5s ease;
    -webkit-transition:margin-left 0.5s ease;
}
#demoNav:hover {
    margin-left:0;
}

Upvotes: 1

Anh T&#250;
Anh T&#250;

Reputation: 636

Use jQuery:

$("#demoNav").hover(function(){
    // do something when mouse hover           
},function(){
    //do some thing when mouseout
});

Upvotes: 0

svineet
svineet

Reputation: 1889

Add a mouseleave event - 

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

Upvotes: 0

Related Questions