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

代替mouseenter和mouseleave函数u cud更优雅地使用hover函数。

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

这是official documentation with example

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

2 个答案: