分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Jquery菜单onmouseenter和mouseleave奇怪的行为，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_489_2@

这是我在悬停时隐藏/显示菜单项的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

@H_489_2@

解决方法

尝试停止事件的所有动画：

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
                },mouSELEave: function(E) {
                $(this).stop(true,truE).find('>ul').fadeOut(100,function() {
                    $(this).hide();
                })
            }
        });   
}