Question

我遇到jQuery mouseenter和mouseout（以及mouseleave）的问题。我的代码如下：

$('nav#mainMenu ul li:not(:first), nav#mainMenu ul li ul:not(li a)').each(function() {
    $(this).mouseenter(function() {
        $(this).children('a').addClass('active');
        var left = $(this).outerWidth(true),
            width = 0;
        if($(this).hasClass('help')) { // IF HELP
            $(this).prevAll('li').each(function() {
                width += $(this).outerWidth(true);
            });
        } else { // ELSE
            $(this).nextAll('li').each(function() {
                width += $(this).outerWidth(true);
            });
        }

        var width = width + 1;

        if($(this).hasClass('help')) {
            $(this).children('ul').css({ 'right':left, 'width':width });
            $(this).children('ul').stop().show('slide', { direction: 'right' }, 250);
        } else {
            $(this).children('ul').css({ 'left':left, 'width':width });
            $(this).children('ul').stop().show('slide', { direction: 'left' }, 250);
        }
    });
        $(this).mouseout(function() {
        if($(this).hasClass('help')) {
            $(this).children('ul').stop().hide('slide', { direction: 'right' }, 250, function() {
                $(this).parent('li').children('a').removeClass('active');
            });
        } else {
            $(this).children('ul').stop().hide('slide', { direction: 'left' }, 250, function() {
                $(this).parent('li').children('a').removeClass('active');
            });
        }
    });
});

当我用光标停留动画结束时，效果很好，但是如果我离开中间，则mouseout不会被触发，children('ul')仍然可见。有什么想法吗？

编辑：Problm显然是由使用jQueryUI的slide而不是“基本”jQuery方法引起的。唯一的问题是 - 它能以某种方式修复吗？

Answer 1

将鼠标悬停在鼠标上并将鼠标移出一个函数，只有....

$('nav#mainMenu ul li:not(:first), nav#mainMenu ul li ul:not(li a)').each(function() {
    $(this).hover(function() {
        $(this).children('a').addClass('active');
        var left = $(this).outerWidth(true),
            width = 0;
        if($(this).hasClass('help')) { // IF HELP
            $(this).prevAll('li').each(function() {
                width += $(this).outerWidth(true);
            });
        } else { // ELSE
            $(this).nextAll('li').each(function() {
                width += $(this).outerWidth(true);
            });
        }

        var width = width + 1;

        if($(this).hasClass('help')) {
            $(this).children('ul').css({ 'right':left, 'width':width });
            $(this).children('ul').stop().show('slide', { direction: 'right' }, 250);
        } else {
            $(this).children('ul').css({ 'left':left, 'width':width });
            $(this).children('ul').stop().show('slide', { direction: 'left' }, 250);
        }

        ,function() {
        if($(this).hasClass('help')) {
            $(this).children('ul').stop().hide('slide', { direction: 'right' }, 250, function() {
                $(this).parent('li').children('a').removeClass('active');
            });
        } else {
            $(this).children('ul').stop().hide('slide', { direction: 'left' }, 250, function() {
                $(this).parent('li').children('a').removeClass('active');
            });
        }
    });
});

jQuery mouseenter / mouseleave导致滞后

1 个答案: