Действие при наведении меню Javascript: не останавливать каскадирование - PullRequest
Новая
       40

Действие при наведении меню Javascript: не останавливать каскадирование

0 голосов
/ 18 февраля 2012

Вот сайт, о котором я говорю: http://benjaminpotter.org/clients/c3carlingford/

Итак, я создаю меню, в котором всплывающие окна появляются при наведении курсора на элемент меню:

enter image description here

и поэтому я написал функцию javascript (jQuery) для ее анимации: 

$(".info").css({"opacity": "0", "margin-top": "10px"}).hide(0);

$("#menu-item-51").mouseenter(function(){

    $(".nav1").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-51").mouseleave(function(){

    $(".nav1").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-11").mouseenter(function(){

    $(".nav2").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-11").mouseleave(function(){

    $(".nav2").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-12").mouseenter(function(){

    $(".nav3").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-12").mouseleave(function(){

    $(".nav3").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-13").mouseenter(function(){

    $(".nav4").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-13").mouseleave(function(){

    $(".nav4").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-14").mouseenter(function(){

    $(".nav5").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-14").mouseleave(function(){

    $(".nav5").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-15").mouseenter(function(){

    $(".nav6").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-15").mouseleave(function(){

    $(".nav6").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

во-первых, проблема в том, что кода много ... но он работает ...

Так в чем же проблема?

Проблема заключается в следующем:

enter image description here

при наведении курсора мыши на четверть и выше по всем ссылкам происходит каскад. Круто я знаю, но клиенту это не нравится. Я тоже.

Так как мне изменить его так, чтобы он вел себя лучше?

Я бы хотел, чтобы это работало так:

enter image description here

, где их выпадающие списки не совпадают: мышь над всем, каскадная штука ...

Вы можете проверить их сайт здесь: http://thecity.org/

Ответы [ 2 ]

1 голос
/ 18 февраля 2012

Попробуйте изменить stop(0) на stop(true, true) во всех местах вашего кода. Должно работать как положено.

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

stop(clearQueue, jumpToEnd) - Останавливает текущую анимацию для соответствующих элементов.

1 голос
/ 18 февраля 2012

В вашем mouseleave событии я бы использовал метод .hide() из jQuery. Я просто предполагаю, что вы хотели бы скрыть элементы после выхода из пункта меню?

Я сделал небольшую скрипку, чтобы проиллюстрировать проблему. Нажмите здесь для результатов

Удачи!

...