jQuery $ .hover, используемый для подменю, вызывающий «подпрыгивание» - PullRequest
Новая
       5

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

0 голосов
/ 28 октября 2009

У меня проблемы с методом наведения 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>

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

Ответы [ 2 ]

5 голосов
/ 28 октября 2009

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

if( !$(this).children("ul").is(":animated") ){
  $(this).children("ul").slideUp(125);
}
0 голосов
/ 28 октября 2009

Вы можете попробовать использовать 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, поскольку они уже проделали всю эту тяжелую работу за вас:)

...