jQuery's mouseenter/mouseleave causes lag
<p>I have a problem with jQuery's <code>mouseenter</code> and <code>mouseout</code> (and <code>mouseleave</code>). My code is as follows:</p>

<pre><code>$('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');
            });
        }
    });
});
</code></pre>

<p>When I stay with my cursor for the end of animation, it works great, but if I leave in the middle, <code>mouseout</code> isn't fired and <code>children('ul')</code> is still visible. Any ideas?</p>

<p>edit: Problm is clearly caused by using jQueryUI's <code>slide</code>, instead of "basic" jQuery methods. Only problem is - can it be fixed somehow?</p>
