jQuery $.hover используется для подменю, вызывающего подпрыгивание

У меня возникли проблемы с методом наведения jQuery.

Вот соответствующий код JavaScript:

$("#navigation > li > ul").hide();
$("#navigation > li").hover(
    function() {
        $(this).children("ul").slideDown(125);
    },
    function() {
        $(this).children("ul").slideUp(125);
    }
);

Вот соответствующий HTML:

<ul id="navigation">
    <li><a href="#">Top Level Item #1</a></li>
    <li>
        <a href="#">Top Level Item #2</a>
        <ul>
            <li><a href="#">Sub-Menu Item #2-1</a></li>
            <li><a href="#">Sub-Menu Item #2-2</a></li>
            <li><a href="#">Sub-Menu Item #2-3</a></li>
        </ul>
    </li>
</ul>

Всякий раз, когда вы наводите указатель мыши на элемент верхнего уровня, подменю в нем (если есть) раскрывается с красивым эффектом быстрого скольжения. Проблема заключается в том, что когда вы быстро наводите курсор мыши «в» меню и держите указатель мыши там, где меню должно быть, но еще не достигнуто: тогда меню достигнет «конца» анимации наведения мыши и отскочит. вернитесь в скрытое состояние и повторяйте, пока не уберете мышь из раскрывающегося меню.


drop-down-menu jquery hover
person Zack    schedule 28.10.2009    source источник
comment
Если я правильно понимаю проблему, это связано с тем, что вторая функция в вашем вызове при наведении (та, которая вызывается, когда указатель покидает соответствующий элемент) вызывается при входе в подменю.   -  person brettkelly    schedule 28.10.2009
comment
Есть ли способ предотвратить это? Я все еще очень новичок в jQuery, могу ли я заставить его не выполнять вторую функцию наведения в очереди, пока не завершится первая?   -  person Zack    schedule 28.10.2009

Ответы (2)


arrow_upward
5
arrow_downward

Возможно, добавление проверки в функцию mouseout может помочь:

if( !$(this).children("ul").is(":animated") ){
  $(this).children("ul").slideUp(125);
}
person Seb    schedule 28.10.2009

arrow_upward
0
arrow_downward

Вы можете попробовать использовать hoventIntent, плагин jQuery, который помогает определить намерение пользователя, наводящего курсор на элементы.

http://cherne.net/brian/resources/jquery.hoverIntent.html

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

<script type="text/javascript" language="JavaScript" src="jquery.hoverIntent.minified.js"></script>

и изменил одну строку с помощью hover() на:

$("#navigation > li").hoverIntent(

Я не мог заставить его отскакивать, и это больше походило на всплывающее меню с примененным поведением hoverIntent.

Наконец, вы можете попробовать использовать один из готовых плагинов меню jQuery, так как они уже сделали всю эту тяжелую работу за вас :)

person wojo    schedule 28.10.2009
comment
Мне придется больше изучать плагины, как только я хорошо разберусь с jQuery, я все еще много изобретаю колесо, чтобы немного лучше понять, как и почему. Спасибо за предложение, я уже добавил его в закладки :› - person Zack; 28.10.2009