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动画两次或三次似乎在没有鼠标进入或离开的情况下多次以相同的效果动画。

这里到底发生了什么？解决办法是什么？ ps：我在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);});  

这是带有示例的官方文档