jQuery - slideToggle, ссылки продолжают скользить вверх и вниз

#jquery

Вопрос:

Я пытаюсь, чтобы некоторые пункты меню скользили вниз, когда пользователь наводит курсор на изображение, а затем скрывались, когда они отводят курсор от изображения и / или пунктов меню. Проблема в том, что если пользователь не очень, действительно точен, когда он наводит курсор мыши на пункт меню, пункты меню будут скользить вверх, и вниз, и вверх … и вниз.

Есть ли способ заставить это работать так, чтобы после появления пунктов меню они оставались на месте до тех пор, пока пользователь не «наведет курсор мыши» либо на основное изображение, либо на элементы ссылок под изображением?

Вот JSFiddle. Любая помощь приветствуется.

1. Похоже, что существует проблема с расстоянием, которая вызывает это — между изображением / корзиной и дочерними элементами.

2. @Evan Я удалил заполнение, но все еще вижу то же поведение.

Ответ №1:

Остановите распространение событий наведения при вызове .slideBucket дочерних элементов. Вам также нужно будет расположить корзину слайдов так, чтобы она перекрывала корзину, и не запускался mouseleave. А затем вручную выполните слайд-шоу в корзине слайдов. Добавление .stop(true, true) также помогает очистить анимацию:

http://jsfiddle.net/gilly3/yHMQV/9/

 $(".bucket").hover(function() {
    $(this).children('.slideBucket').stop(true, true).slideToggle('400');
}).children('.slideBucket').hover(function(e) {
    e.stopPropagation();
}, function(e) {
    e.stopPropagation();
    $(this).slideUp(400);
});

1. Спасибо за ответ, который выглядит ближе. При наведении курсора мыши на элемент списка меню не исчезает.

2. @MarkB — Ya, это было не так просто, как я сначала думал. Все еще не так уж плохо исправить, проверьте мой обновленный ответ и jsFiddle.

3. Я думаю, что что-то не так с основой этого меню. Я видел, как они хорошо работают в Интернете, поэтому я могу отказаться от них и начать все сначала или попытаться найти где-нибудь плагин. Я уже потратил на это часы. Еще раз спасибо.

Ответ №2:

Вот моя версия: jsfiddle
наведение на самом деле выполняет две функции 🙂

 $(document).ready(function(){  
    $(".bucket").hover(  
        function(){  
            $(this).children('.slideBucket').slideDown('400');  
        },  
        function(){  
            $(this).children('.slideBucket').slideUp('400');  
        }  
    );  
});

1. Спасибо @Kostas. Я медленно убеждаю себя, что версии slide() — это не то, что я хочу. Иногда после наведения курсора мыши на изображение меню продолжают скользить вверх и вниз еще 1-2 раза. Иногда это работает отлично. Иногда, если я запускаю выпадающие списки, а затем навожу курсор, меню остается видимым…