Jquery 菜单 onmouseenter 和 mouseleave 奇怪的行为

Question

这是我的 js 菜单，它在悬停时隐藏/显示菜单项... 我有这样的菜单:

    <ul class="main">
        <li class="acro_jq_menu">
            <a href="" title="How to">How to one </a>
            <ul>
                <li>item21</li>
                <li>ite222m1</li>
                <li>item1</li>
            </ul>
        </li>
        <li class="acro_jq_menu">
            <a href="" title="How to">How to Two </a>
            <ul>
                <li>item1</li>
                <li>it2em1</li>
                <li>it41em1</li>
            </ul>
        </li>
   </ul>

这是 JavaScript:

function slideMenu()  {
 var items = $('.main li.acro_jq_menu');
        items.bind({
            mouseenter: function(e) {
                $(this).find('>ul').css({
                    'opacity':0
                }).show().animate(

                {
                    'opacity':1
                },
                500);
            },
            mouseleave: function(e) {
                $(this).find('>ul').fadeOut(100, function() {
                    $(this).hide();
                })
            }
        });   
}

$(document).ready(function(){
        slideMenu();
    });​

一切正常，但有时当我鼠标离开此列表项中的当前 li 内容时，隐藏时间太长(超过 2 秒左右)，有时内容根本不显示。我认为 jquery 代码有问题，但我无法弄清楚。

这里是我的代码的 JSfiddle 示例的链接:link

Answer 1

尝试停止事件上的所有动画:

http://jsfiddle.net/6hZuV/4/

function slideMenu()  {
 var items = $('.main li.acro_jq_menu');
        items.bind({
            mouseenter: function(e) {
                $(this).stop(true, true).find('>ul').css({
                    'opacity':0
                }).show().animate(

                {
                    'opacity':1
                },
                500);
            },
            mouseleave: function(e) {
                $(this).stop(true, true).find('>ul').fadeOut(100, function() {
                    $(this).hide();
                })
            }
        });   
}