jQuery mouseenter() 和 mouseleave()答案

【问题标题】：JQuery mouseenter() and mouseleave()jQuery mouseenter() 和 mouseleave()
【发布时间】：2013-04-01 13:50:53
【问题描述】：

所以我得到了这个演示导航，它的侧面有一个小按钮，当你悬停按钮时，它会将菜单滑入窗口。虽然我已经让悬停工作了，但是现在当鼠标离开时，它仍然是打开的。如何解决这个问题？顺便说一句，我对 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)
});

如果您需要更多信息，请告诉我，我会提供更多代码。

【问题讨论】：

这不是鼠标悬停按钮，这是鼠标进入 div 布局，执行 $("#demoNav .open").hover(function(){ //XXXXX 代码切换 } );

标签： javascript jquery html mouseenter mouseleave

【解决方案1】：

试试这个：

$("#demoNav").hover(

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

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

【讨论】：

工作就像一个魅力！谢谢

【解决方案2】：

你实际上并没有告诉它再次隐藏。

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

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

【讨论】：

【解决方案3】：

添加 mouseleave 事件 -

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

【讨论】：

【解决方案4】：

使用 jQuery：

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

【讨论】：

【解决方案5】：

您为mouseenter 编码，但忘记为mouseleave event 编码

在 jQuery 中添加这些行

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

这里的工作示例：

http://jsfiddle.net/EP6wR/

但我会建议使用更清洁的悬停方法

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

【讨论】：

【解决方案6】：

这个解决方案可能有效

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

这将在按钮悬停时激活窗格，但是当您离开 div 时，它会再次向左移动

【讨论】：