JQuery mouseenter()和mouseleave()

Question

所以我得到了这个演示导航，它在旁边有一个小按钮，当你悬停按钮时，它会将菜单滑到窗口中。虽然我已经让鼠标悬停了，但现在当鼠标离开时，它仍然是打开的。如何解决这个问题？顺便说一下，我对jQuery还很陌生

下面是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>

和我的jQuery：

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

如果你需要更多的信息，尽管告诉我，我会提供更多的代码。

Answer 1

试试这个：

$("#demoNav").hover(

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

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

Answer 2

实际上，您并没有让它再次隐藏起来。

也就是说，我想推荐这个CSS替代方案：

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

Answer 3

添加鼠标保存事件-

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