jquery：mouseenter（）mouseleave（）动画中的错误

Question

我正在尝试使用 jquery 在页面的侧边栏中创建一个垂直滚动菜单，代码如下： HTML:

<ul class="side-menu">
<li id="menu1" ><a href="#">Item-1</a>
    <ul class="inner-side-menu" id="menu1_inner">
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
    </ul>
</li>
<li id="menu2"><a href="#">Item-2</a>
    <ul class="inner-side-menu" id="menu2_inner">
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
    </ul>
</li>
<li id="menu3"><a href="#">Item-3</a>
    <ul class="inner-side-menu" id="menu3_inner">
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
    </ul>
</li>
<li id="menu4"><a href="#">Item-4</a>
    <ul class="inner-side-menu" id="menu4_inner">
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
        <li><a href="#">Sub-item</a></li>
    </ul>
</li>

JQuery:

<script type="text/javascript">
$('#menu1').mouseenter(function(){
    $('#menu1_inner').show('slow');
}).mouseleave(function(){
    $('#menu1_inner').hide('slow');
});
//Similar for #menu2, #menu3 and #menu4
</script>

我遇到了一个非常奇怪的错误，在正常情况下，代码运行良好，但如果我将鼠标悬停在 #menu1/2/3/4 上并立即离开，则相应的 #menu_inner 动画两次或三次似乎它以相同的效果多次动画没有鼠标进入或离开的次数。

这里实际发生了什么？解决方案是什么？ p.s.：我在 firefox 10、IE9、Maxthon 3 和 Opera 11 中测试过同样的错误。

Answer 1

发生这种情况是因为动画已排队并且除非您强行停止它们，否则它们会继续运行。使用stop方法停止之前的动画。

$('#menu1').mouseenter(function(){
    $('#menu1_inner').stop(true, true).show('slow');
}).mouseleave(function(){
    $('#menu1_inner').stop(true, true).hide('slow');
});

stop(clearQueue, jumpToEnd)- 停止匹配元素上当前正在运行的动画。

Answer 2

你可以更优雅地使用 hover 函数，而不是 mouseenter 和 mouseleave 函数。

$('#menu1').hover(function()
{$(this).fadeOut(100);$(this).fadeIn(500);});  

这里是official documentation with example