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();
                })
            }
        });   
}