JQuery UI .show («слайд») некорректно анимирует

Question

Я пытаюсь сделать div, который будет плавно выдвигаться, когда вы наводите курсор мыши на «триггер». Оно появляется полностью, затем быстро исчезает и снова выскальзывает. Я не могу понять причину такого поведения.

При необходимости я могу немного поднять образец. Тестовый набор здесь . Это происходит во всех основных браузерах, кроме IE6.

HTML:

 <div class='wrap'>
    <div id='navtitle'>
            NAV>>
    </div>
        <div id='nav'>
            <div id='navlist' class='rounded curvyRedraw'>
                <div class='top'><div></div></div>
                <ul>
                    <li><a href='#'>Home</a></li>
                    <li><a href='#'>Singles</a></li>
                    <li><a href='#'>Supplies</a></li>
                    <li><a href='#'>Cart</a></li>
                </ul>
            </div>

        </div>
    </div>

Javascript:

 $(document).ready(function (){
$('#navlist').hide();
$('#navtitle').bind("mouseenter", function(){
    $('#navlist').show('slide');
});
$('#nav').bind("mouseleave", function(){
    $('#navlist').hide('slide');
  });

Answer 1

Я думаю, что некоторые из проблем связаны с изменением фокуса при выдвижении div, что приводит к вызову обработчиков при изменении фокуса, хотя я могу ошибаться в этом. Это может быть связано с тем, как jQuery обрабатывает кросс-браузерные события мыши (не все браузеры имеют одинаковые события, поэтому jQuery может их аппроксимировать). Я смог заставить его работать «в основном», применив обработчики событий мыши для обработки одного события и используя обратные вызовы, чтобы убедиться, что только один из них активен в любой момент времени, поэтому нет переключения между ними. Заметьте, я должен был указать явное направление / скорость для скрытия, или оно просто исчезло. Не уверен, почему, хотя это может быть связано с тем, как настроен мой пример, и div просто исчезает, как только левый край элементов списка покидает страницу.

$(function() {
    $('#navlist').hide();
    $('#navtitle').one('mouseenter', showOnEnter);
});

function showOnEnter() {
    $('#navlist').show('slide', function() {
        $('#nav').one('mouseleave', function() {
            $('#navlist').hide('slide', { direction: 'left' }, 1000,  function() {
                $('#navtitle').one('mouseenter',showOnEnter);
            });
        });
    });
}

Answer 2

Это помогло бы увидеть пример. Первое, что бросается в глаза, это >>. Какие-нибудь изменения, когда вы их удалите? Это не должно быть проблемой (<больше проблем для браузеров), но я решил спросить. </p>