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

Jquery菜单onmouseenter和mouseleave奇怪的行为

1 个答案: